我正在使用React Native构建一个iOS应用,并正在实现TabBarIOS.选项卡上的内容似乎在后面,并被该条遮盖.在xcode中,我只需要取消选中扩展边缘"复选框,但不确定如何使用React Native来做到这一点.
I'm building an iOS app with React Native and am implementing a TabBarIOS. The content on the tabs seems to flow behind and be obscured by the bar. In xcode I would have just unchecked the "extend edges" boxes but am not sure how to do this with React Native.
这是我正在尝试做的缩写. CreateUser中的<View>流在选项卡栏的后面.是否有一种简单的方法来确保标签栏不会遮挡内容?
Here's an abbreviated version of what I'm trying to do. The <View> from CreateUser flows behind the tab bar. Is there an easy way to make sure content doesn't get obscured by the tab bar?
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", } })推荐答案
当我使用NavigatorIOS组件,然后将其呈现为包含TabBarIOS组件的initialRoute组件时,这对我来说是个问题.
This was a problem for me when using a NavigatorIOS component that then rendered it's initialRoute component which contained a TabBarIOS component.
在这种情况下,您可以使用ScrollView对其进行修复:
If this is the case for your scenario, you can fix it by using a ScrollView:
将flex布局样式添加到NavigatorIOS:
Add the flex layout style to your NavigatorIOS: <NavigatorIOS initialRoute={{ component: MyView, title: 'My View', }} style={{flex: 1}} />
使用ScrollView:
Use a ScrollView:
<TabBarIOS> <TabBarIOS.Item systemIcon="history" title="A Tab"> <ScrollView> <Text> Hello World </Text> </ScrollView> </TabBarIOS.Item> </TabBarIOS>
更多推荐
使用React Native隐藏在TabBarIOS后面的内容
发布评论