Контент, скрытый за TabBarIOS с React Native

Question

Я создаю приложение для iOS с React Native и внедряю TabBarIOS, Контент на вкладках, кажется, отстает и скрыт панелью. В xcode я бы просто снял флажки "расширить края", но не уверен, как это сделать с помощью React Native.

Вот сокращенная версия того, что я пытаюсь сделать. <View> от CreateUser течет за панелью вкладок. Есть ли простой способ убедиться, что контент не скрывается панелью вкладок?

import React from 'react'
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
} from 'react-native'

export default class TabBar extends React.Component {
  state = {
    selectedTab: 'list'
  }

  render() {
    return (
      <TabBarIOS selectedTab={this.state.selectedTab}
        unselectedTintColor="#ffffff"
        tintColor="#ffe429"
        barTintColor="#294163">

        <TabBarIOS.Item 
          title="My List"
          systemIcon="bookmarks"
          selected={this.state.selectedTab==='list'}
          onPress={() => {
              this.setState({
                  selectedTab: 'list',
              });
          }}
          >
          <CreateUser />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }
}


var styles = StyleSheet.create({
  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  tabText: {
    color: 'darkslategrey',
    margin: 50,
  },
});



export default class CreateUser extends React.Component{

    render(){
        return (
                <View style={styles.container}>
                    <TouchableHighlight style={styles.button}>
                        <Text style={styles.buttonText}>LOG IN</Text>
                    </TouchableHighlight>
                </View>
            )
    }

}



var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "column",
        justifyContent: "flex-end",
        alignItems: 'center',
    },
    button: {
        backgroundColor: "#ffe429",
        borderRadius: 3,
        height: 60,
        width: 200,
        margin: 7,
        //flex: 1,
        alignItems: "center",
        justifyContent: "center",
    },
    buttonText: {
        color: "#294163",
    }

})

Answer 1

Это было проблемой для меня, когда я использовал компонент NavigatorIOS, который затем визуализировал свой компонент initialRoute, который содержал компонент TabBarIOS.

Если это так для вашего сценария, вы можете исправить это с помощью ScrollView:

1. Добавьте стиль гибкой компоновки в ваш NavigatorIOS:

   <NavigatorIOS
   initialRoute={{
       component: MyView,
       title: 'My View',
   }}
   style={{flex: 1}}
   />
   

2. Используйте ScrollView:

   <TabBarIOS>
   <TabBarIOS.Item
     systemIcon="history"
     title="A Tab">
     <ScrollView>
       <Text>
         Hello World
       </Text>
     </ScrollView>
   </TabBarIOS.Item>
   </TabBarIOS>
   

Answer 2

В моем случае мне нужно было добавить flex: 1 к стилю реквизита для топ-уровня View экрана.

Документы RN Navigation

      //MyScreen.tsx

export default () => (
  <View style={{ flex: 1 }}>
  ...
  </View>
)