反应导航 - createBottomTabNavigator 不工作

Question

你好，我正在用 expo 制作一个 React Native 应用程序。以下是我的 app.js 文件：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createBottomTabNavigator} from 'react-navigation';
import WelcomeScreen from "./screens/WelcomeScreen";
import AuthScreen from "./screens/AuthScreen";

export default class App extends React.Component {
  render() {
    const MainNavigator = createBottomTabNavigator({
       Welcome: WelcomeScreen,
       Auth: AuthScreen
    });

    return (
      <View style={styles.container}>
        <MainNavigator/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

下面是我的 package.json 文件：

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "dependencies": {
    "expo": "^28.0.0",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
    "react-navigation": "^2.6.2"
  }
}

该应用运行没有任何错误，但不显示底部导航选项卡！我也检查了官方文档中的语法，我担心这可能是由于 react-navigation 的版本所致。任何帮助将不胜感激。

以下是我的欢迎屏幕组件文件：

import React, {Component} from 'react';
import {Text, View} from "react-native";

class WelcomeScreen extends Component{
    render(){
        return(
            <View>
                <Text>
                    Hello this is working!
                </Text>
            </View>
        );
    }
}

export default WelcomeScreen;

auth 组件也一样，只是名称有所改变。

Answer 1

版本不是问题。问题出在自定义 StyleSheet 和 <View/> 组件

你可以View the edited app here

如果您想在您的应用程序中尝试 package.json 是：

{
  "dependencies": {
    "@expo/vector-icons": "6.2.1",
    "react-native-elements": "0.18.5",
    "react-navigation": "^2.6.2"
  }
}

和App.js是：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation'; // Version can be specified in package.json

class AuthScreen extends React.Component{
    render(){
        return(
            <View>
                <Text>
                    AuthScreen Works!
                </Text>
            </View>
        );
    }
}

class WelcomeScreen extends React.Component{
    render(){
        return(
            <View>
                <Text>
                    Hello this is working!
                </Text>
            </View>
        );
    }
}

export default class App extends React.Component {
    render() {
        const MainNavigator = createBottomTabNavigator({
            Auth: { screen: AuthScreen },
            Welcome: { screen: WelcomeScreen },
        });

        // return (
        //     <View style={styles.container}>
        //       <MainNavigator/>
        //     </View>
        // );

        return <MainNavigator/>
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 2

尝试将堆栈导航器作为您的第一个屏幕，然后尝试加载欢迎屏幕和其他屏幕作为底部选项卡导航器，我在我的许多应用程序中都使用过这种结构试试这个 https://github.com/davekedar/React-Navigation-V2-Authflow

Answer 3

我升级到

解决了这个问题

"react-navigation": "^2.13.0"

Answer 4

今天遇到了 "react-navigation": "^4.3.9"。

已通过设置 <View style={{ flex: 1 }}> 而不仅仅是 <View> 进行了修复。如果您将导航器包裹在 <View>（即 <Fragment>）以外的其他内容中，则不会发生此问题。

https://github.com/react-navigation/react-navigation/issues/8449

https://reactnavigation.org/docs/troubleshooting/#nothing-is-visible-on-the-screen-after-adding-a-view

反应导航 - createBottomTabNavigator 不工作

react-navigation - createBottomTabNavigator not working

javascript

reactjs

react-native

react-navigation

expo