使用React Native

Question

我正在使用React Native构建iOS应用并正在实施TabBarIOS。标签上的内容似乎在后面流动并被条形图遮挡。在xcode中，我只是取消选中＆＃34;扩展边缘＆＃34;盒子，但我不知道如何使用React Native。

这是我尝试做的缩写版本。来自<View>的{​​{1}}位于标签栏后面。是否有一种简单的方法可以确保内容不被标签栏遮挡？

CreateUser

Answer 1

当使用NavigatorIOS组件然后呈现它的包含TabBarIOS组件的initialRoute组件时，这对我来说是一个问题。

如果是您的方案的情况，您可以使用ScrollView修复它：

1. 将flex布局样式添加到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 docs

//MyScreen.tsx

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