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

Question

我正在使用React Native构建iOS应用程序，并正在实施TabBarIOS。标签上的内容似乎流向后面，并被酒吧遮蔽。在xcode中，我只是取消选中“扩展边缘”框，但不知道如何使用React Native执行此操作。

下面是我试图做的一个缩写版本。来自CreateUser的<View>在标签栏后面流动。有没有简单的方法来确保内容不被标签栏遮挡？

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组件，然后渲染它含有一个TabBarIOS组件initialRoute组件时，是我的问题。

如果这是您的方案的情况下，你可以使用滚动型解决它：

1. 柔性布局样式添加到您的NavigatorIOS：

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

2. 使用滚动型：

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