反应原生导航未显示

Question

我一直在尝试在我的应用程序中实现 React-native-navigation 并且似乎无法使其工作。

我的应用.js：

import React from 'react';
import Navigator from './src/components/Navigator'

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Navigator />
      </React.Fragment>
    );
  }
}
export default App;

和我的导航器.js

import React, { Component } from 'react';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import LoginScreen from '../screens/Login';
import HomeScreen from '../screens/Homescreen'
import Icon from 'react-native-vector-icons/Ionicons';
import App from '../../App';
 export default Navigator = () => createMaterialBottomTabNavigator(
  {
    LoginScreen: {
      screen: LoginScreen,
      navigationOptions: {
        tabBarLabel: 'Login',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon size={23} name={(focused ? 'ios-home' : 'ios-home-outline')} style={{ color: tintColor }} />
        ),
      }
  },
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon size={23} name={(focused ? 'ios-stats' : 'ios-stats-outline')} style={{ color: tintColor }} />
        )
      }
    },
  },
  {
    shifting: false,
    backBehavior: "initialRoute",
    initialRouteName: "LoginScreen",
    activeColor: 'white',
    tabBarColor: 'blue',
    inactiveTintColor: 'black',
    barStyle: { backgroundColor: 'orange'},
    swipeEnabled: true,
  }
);

现在，应用程序加载并访问我的应用程序.js。但是，它似乎没有显示我的导航器中的任何内容。我知道它找到了它，因为我有路径错误等需要修复。

我错过了什么明显的缺陷？

Answer 1

这里两个不同的项目之间可能存在一些混淆。您尝试实现的内容来自 React Navigation。React Native Navigation，一个独立于Wix的项目，也存在。

您的导入中

存在一些不一致之处，使我怀疑导入失败（../screens/Homescreen中没有大写的"S"，../screens/Login中没有"屏幕"）。并且您应该删除App导入Navigator.

这是一个基于我对您要实现的目标所做的一些假设的工作示例。请注意，对于最新版本的react-navigation-material-bottom-tabs，我需要添加依赖项：

@react-navigation/core
@react-navigation/native
react-native-paper
react-native-screens

扬子晚报.我用一个新的裸react-native init应用程序进行了测试。我还需要使用 React Navigation 的createAppContainer。

import React from 'react'
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'
import { createAppContainer } from '@react-navigation/native'
import Icon from 'react-native-vector-icons/Ionicons'
import LoginScreen from '../screens/LoginScreen'
import HomeScreen from '../screens/HomeScreen'
const Navigator = createMaterialBottomTabNavigator(
  {
    Login: {
      screen: LoginScreen,
      navigationOptions: {
        tabBarLabel: 'Login',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            size={23}
            name={focused ? 'ios-home' : 'ios-home-outline'}
            style={{ color: tintColor }}
          />
        )
      }
    },
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            size={23}
            name={focused ? 'ios-stats' : 'ios-stats-outline'}
            style={{ color: tintColor }}
          />
        )
      }
    }
  },
  {
    shifting: false,
    backBehavior: 'initialRoute',
    initialRouteName: 'Login',
    activeColor: 'white',
    tabBarColor: 'blue',
    inactiveTintColor: 'black',
    barStyle: { backgroundColor: 'orange' },
    swipeEnabled: true
  }
)
export default createAppContainer(Navigator)