使用React Native隐藏在TabBarIOS后面的内容

我正在用React Native构建一个iOS应用程序，并正在实现一个

TabBarIOS

。选项卡上的内容似乎在后面流动，并被栏遮住了。在xcode中，我只需取消选中“扩展边”框，但不确定如何使用React Native执行此操作

这是我想做的事情的简略版本。来自

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",
    }

})

从“React”导入React
进口{
样式表，
文本，
文本输入，
看法
触控高光，
}从“反应本机”
导出默认类TabBar扩展React.Component{
状态={
已选择选项卡：“列表”
}
render（）{
返回(
{
这是我的国家({
已选择选项卡：“列表”，
});
}}
>
);
}
}
var styles=StyleSheet.create({
选项卡内容：{
弹性：1，
对齐项目：“居中”，
},
选项卡文本：{
颜色：“深灰色”，
差额：50，
},
});
导出默认类CreateUser扩展React.Component{
render（）{
返回(
登录
)
}
}
var styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:“列”，
辩护内容：“柔性端”，
对齐项目：“居中”，
},
按钮：{
背景色：“ffe429”，
边界半径：3，
身高：60，
宽度：200，
差额：7，
//弹性：1，
对齐项目：“中心”，
辩护内容：“中心”，
},
按钮文字：{
颜色：“294163”，
}
})

使用NavigatorIOS组件时，我遇到了一个问题，该组件随后呈现了包含TabBarIOS组件的initialRoute组件

如果您的场景是这种情况，您可以使用ScrollView进行修复：

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

将flex布局样式添加到NavigatorIOS：

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

使用滚动视图：

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

你好，世界

---

选项卡内容呈现

组件的场景如何？我现在正在处理这个问题，使用

ScrollView

没有多大意义。