React native 与React Native中的CreateBoottomTabNavigator和createStackNavigator冲突

我已经开始学习react native，我遇到了一些问题。我似乎无法同时使用这两个组件（CreateBoottomTabNavigator和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”导入React
从“./Navigation/Navigation”导入导航
从“react redux”导入{Provider}
从“./Store/configureStore”导入存储
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}

要在特定屏幕中的堆栈和着陆之间导航，请使用：

navigation.navigate（'Stack'，{screen:'screenName'）

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

---

嵌套堆栈是可能的。我建议您看看这里：

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

const MoviesTabNavigator=createBottomTabNavigator({
搜索：{
屏幕：SearchStackNavigator
},
最爱：{
屏幕：最爱
}
})
导出默认createAppContainer（MoviesTabNavigator）

我建议您使用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>

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>

从'@react navigation/stack'导入{createStackNavigator}；
const Stack=createStackNavigator（）；
const SearchStackNavigator=（）=>

MoviesTabNavigator：

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>

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>

从'@react navigation/bottom tabs'导入{createBottomTabNavigator}；
从“/SearchStackNavigator”导入SearchStackNavigator；
const Tab=createBottomTabNavigator（）；
const MoviesTabNavigator=（）=>

反应导航文档：

---

感谢您的帮助！谢谢，下一个项目我将转到v5。