与 React Native 中的 createBottomTabNavigator 和 createStackNavigator 冲突答案

【问题标题】：Conflict with createBottomTabNavigator and createStackNavigator in React Native与 React Native 中的 createBottomTabNavigator 和 createStackNavigator 冲突
【发布时间】：2020-11-26 19:57:40
【问题描述】：

我已经开始学习 react-native，但遇到了一些问题。我似乎无法同时使用这两个组件（createBottomTabNavigator 和 createStackNavigator）。导出默认值只能使用一次，我想渲染两个组件（目前只有一个或另一个正在渲染）。能得到一些帮助会很棒。谢谢

Navigation.js
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import Search from '../Components/Search'
import Favourites from '../Components/Favourites'
import FilmDetail from '../Components/FilmDetail'

const SearchStackNavigator = createStackNavigator({
  Search: {
    screen: Search,
    navigationOptions: {
      title: 'Search Film'
    }
  },
  FilmDetail: {
    screen: FilmDetail,
    navigationOptions: {
        title: 'Film Details'
    }
  }
})
const MoviesTabNavigator = createBottomTabNavigator({
  Search: {
    screen: Search
  },
  Favourites: {
    screen: Favourites
  }
})

export default createAppContainer(MoviesTabNavigator)

我知道我没有使用最新版本的 React-Native

Package.json
{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "expo": "~39.0.2",
    "expo-cli": "^3.28.5",
    "expo-status-bar": "~1.0.2",
    "moment": "^2.29.1",
    "numeral": "^2.0.6",
    "react": "16.13.1",
    "react-dom": "^16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^1.0.0",
    "react-native-screens": "^2.7.0",
    "react-native-web": "^0.11.7",
    "react-navigation": "^4.3.9",
    "react-navigation-stack": "^2.5.0",
    "react-navigation-tabs": "^2.8.13",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

这是我的 App.js

import React from 'react'
import Navigation from './Navigation/Navigation'
import { Provider } from 'react-redux'
import Store from './Store/configureStore'

export default class App extends React.Component {
  render() {
    return (
      <Provider store={Store}>
        <Navigation/>
      </Provider>
    );
  }
}

【问题讨论】：

标签： react-native

【解决方案1】：

嵌套屏幕将解决您的问题。我假设您希望在 MoviesTabNavigator 中使用 SearchStackNavigator。执行以下操作

const MoviesTabNavigator = createBottomTabNavigator({
  Search: {
    screen: SearchStackNavigator
  },
  Favourites: {
    screen: Favourites
  }
})

export default createAppContainer(MoviesTabNavigator)

【讨论】：

【解决方案2】：

要在堆栈之间导航并进入特定屏幕，请使用：

navigation.navigate('Stack', {screen: 'screenName')

错误似乎是 Search 不是指您的 SearchStackNavigator，而是您在顶部导入的“搜索”组件。

嵌套堆栈是可能的。我建议看看这里：Master React Navigation 5

【讨论】：

感谢您的帮助！

【解决方案3】：

我建议你使用 react-navigation 5.x 并按照这个例子：

SearchStackNavigator：

import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

const SearchStackNavigator = () => 
  <Stack.Navigator>
     <Stack.Screen
        name="Search"
        component={Search}
     />
     <Stack.Screen
        name="FilmDetail"
        component={FilmDetail}
     />
  </Stack.Navigator>

MoviesTabNavigator：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import SearchStackNavigator from "./SearchStackNavigator";

const Tab = createBottomTabNavigator();

const MoviesTabNavigator = () => 
   <Tab.Navigator>
      <Tab.Screen
         name="Search"
         component={SearchStackNavigator} />
       <Tab.Screen
         name="Other tab"
         component={OTHER STACK OR SCREEN HERE} />
   </Tab.Navigator>

反应导航文档：

bottom-tab docs

stack-navigation docs

【讨论】：

谢谢，下一个项目我将移至 v5。