使用React Native隐藏在TabBarIOS后面的内容 [英] Content hidden behind TabBarIOS with React Native

问题描述

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

1. 将flex布局样式添加到NavigatorIOS:

1. 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后面的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！