React Navigation - 创建选项卡导航器元素不起作用？答案

【问题标题】：React Navigation - Creating a tab navigator element is not working?React Navigation - 创建选项卡导航器元素不起作用？
【发布时间】：2018-05-26 21:22:49
【问题描述】：

我正在尝试使用 React Navigation 创建选项卡式布局。这是我的代码：

const Navigator = createMaterialTopTabNavigator({
    Wines,
    Stores,
    Vineyards,
    Restaurants
});

// in render()
<View style={styles.navContainer}>
    <Navigator
        screenProps={this.getScreenProps()}
    />
    <Text>Hello, world!</Text> // Put here for demonstrational purposes
</View>

结果如下：

基本上导航器不占用任何空间，我不知道为什么。我也试过这个

const Navigator = createMaterialTopTabNavigator({
    Wines: {screen: Wines},
    Stores: {screen: Stores},
    Vineyards: {screen: Vineyards},
    Restaurants: {screen: Restaurants}
});

对于Navigator JSX 传入style={{width: 200, height: 200}}，但它似乎没有做任何事情。我做错了什么？

【问题讨论】：

codesandbox 或 codepen 中的工作演示会有所帮助。不太清楚你的问题是什么
@charlietfl 这里：snack.expo.io/HJzfLvvkX。 Navigator 没有占用任何空间，为什么？

标签： css reactjs react-native react-native-android react-navigation

【解决方案1】：

您必须确保在您使用的每个View 中指定flexDirection 和height 样式属性。我将height 添加到render() 内的父视图中，它工作得很好。

链接：https://snack.expo.io/Hy-oLAvJ7

【讨论】：