导航到另一个堆栈底部导航react-native-paper

Question

不知道如何使用react-native-paper和react-navigation导航到另一个堆栈

function RootStack(): JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          presentation: 'transparentModal',
          headerShown: false
        }}>
          <Stack.Screen
            name={'BottomStack'}
            component={BottomStack}
          />
      </Stack.Navigator>
    </NavigationContainer>
  )
} 

带有react-native-paper的BottomStack

import { BottomNavigation, Text } from 'react-native-paper'

const BottomStack = (): JSX.Element => {
  const [index, setIndex] = useState(0)
  const [routes] = useState([
    {
      key: 'home',
      title: 'Home',
      focusedIcon: 'home',
      unfocusedIcon: 'heart-outline'
    },
    { key: 'jobs', title: 'Jobs', focusedIcon: 'album' }
  ])

  const renderScene = BottomNavigation.SceneMap({
    home: HomeStack,
    jobs: JobsStack
  })

  return (
    <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
    />
  )
}

HomeStack - JobsStack 类似

import { createNativeStackNavigator } from '@react-navigation/native-stack'
const Stack = createNativeStackNavigator()

function HomeStack(): JSX.Element {
  return (
    <Stack.Navigator initialRouteName={Routes.HOME}>
        <Stack.Screen name={'Home'} component={Home} />
    </Stack.Navigator>
  )
}

当我选择“作业”选项卡时，出现此错误：

如何解决？

Answer 1

我认为 React Paper 的

BottomNavigation

有问题。没有深入研究它，但它可能有一个内部

NavigationContainer

，这可能会导致问题。

本文对嵌套导航器有帮助： https://reactnavigation.org/docs/nesting-navigators#nesting-multiple-navigators

const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();
const BottomNav = (): JSX.Element => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
};
const BottomStack = (): JSX.Element => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          presentation: 'transparentModal',
          headerShown: false,
        }}>
        <Stack.Screen
          name={'BottomNavigation'}
          options={{title: 'BottomNavigation'}}
          component={BottomNav}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

function Home(): JSX.Element {
  return (
    <Stack.Navigator initialRouteName={'home'}>
      <Stack.Screen name={'Home'} component={Home} />
    </Stack.Navigator>
  );
}

function Jobs(): JSX.Element {
  return (
    <Stack.Navigator initialRouteName={'jobs'}>
      <Stack.Screen name={'Jobs'} component={Jobs} />
    </Stack.Navigator>
  );
}

function App() {
  return <BottomStack />;
}

我将其替换为 Tab 约定，并且能够正常构建。

Answer 2

我按照本指南解决了这个问题：BottomNavigation

Answer 3

您似乎有两个嵌套的导航器：

Stack.navigator

内部

BottomNavigation

。您必须只有一个顶级导航器（一个主屏幕，您可以从该主屏幕导航到所有其他屏幕）。 要解决此问题，您可以将

Stack.Navigator

从

HomeStack

和

JobsStack

全部移至

BottomStack

。方法如下：

const Stack = createNativeStackNavigator()

const BottomStack = (): JSX.Element => {
  const [index, setIndex] = useState(0)
  const [routes] = useState([
    {
      key: 'home',
      title: 'Home',
      focusedIcon: 'home',
      unfocusedIcon: 'heart-outline'
    },
    { key: 'jobs', title: 'Jobs', focusedIcon: 'album' }
  ])

  const renderScene = BottomNavigation.SceneMap({
    home: Home,
    jobs: Jobs
  })

  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          presentation: 'transparentModal',
          headerShown: false
        }}>
        <Stack.Screen
          name={'BottomNavigation'}
          options={{ title: 'BottomNavigation' }}>
          {() => (
            <BottomNavigation
              navigationState={{ index, routes }}
              onIndexChange={setIndex}
              renderScene={renderScene}
            />
          )}
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  )
}

function Home(): JSX.Element {
  return (
    <Stack.Navigator initialRouteName={Routes.HOME}>
      <Stack.Screen name={'Home'} component={HomeScreen} />
    </Stack.Navigator>
  )
}

function Jobs(): JSX.Element {
  return (
    <Stack.Navigator initialRouteName={Routes.JOBS}>
      <Stack.Screen name={'Jobs'} component={JobsScreen} />
    </Stack.Navigator>
  )
}