iOS上的React Navigation v3 BottomTabNavigator黑屏

时间:2019-02-13 21:50:22

标签: reactjs react-native react-navigation

我正在测试React Navigation的BottomTabNavigator,但是在ios模拟器中运行它之后,我得到了黑屏。

复制步骤:

  1. 创建react本机项目react-native init Example
  2. 安装并链接react-navigation和deps npm install --save react-navigation react-native-gesture-handler && react-native link react-native-gesture-handler
  3. 将App.js内容替换为:
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

export default createAppContainer(TabNavigator);
  1. 然后在模拟器react-native run-ios中运行

result

我还尝试过删除node_modules,构建文件夹并清理npm缓存和模拟器内容。

1 个答案:

答案 0 :(得分:0)

如果没有错误,可能是因为您没有在<View>标签上设置背景颜色。

尝试一下:

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

        class HomeScreen extends React.Component {
          render() {
            return (
              <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor:'#fff' }}>
                <Text>Home!</Text>
              </View>
            );
          }
        }

        class SettingsScreen extends React.Component {
          render() {
            return (
              <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor:'#fff' }}>
                <Text>Settings!</Text>
              </View>
            );
          }
        }

    const TabNavigator = createBottomTabNavigator({
      Home: HomeScreen,
      Settings: SettingsScreen,
    });

    export default createAppContainer(TabNavigator);

希望这会有所帮助。