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

本文介绍了使用React Native隐藏在TabBarIOS后面的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用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>