react-native - 反应导航嵌套无路由参数 v5

问题描述

我似乎无法在我的嵌套导航器中获得任何路线参数。参数存在于父导航器中，但它们在子导航器中不可访问。

所以子导航器确实渲染了正确的屏幕，但它在路由中没有任何参数（即类别或产品 ID）。

感觉就像我在滥用某些语法，但我不太清楚是哪一种。这是代码堆栈，稍微编辑一下以使其更易于阅读。

谢谢你。

注意：这些是单独的文件，因此包含已关闭。

import * as React from 'react';
import { Text, View, StyleSheet, SafeAreaView } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator, DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer'
import { createStackNavigator } from '@react-navigation/stack'
import { AppearanceProvider } from 'react-native-appearance'

const Drawer = createDrawerNavigator()
const Stack = createStackNavigator()

const HomeScreen = ({ navigation, route }) => {
  return(
    <View style={styles.container}>
      <Text>Home Screen </Text>
    </View>
  )
}

const CategoryScreen = ({ navigation, route }) => {
  return(
    <View>
      <Text>Category Screen </Text>
      <Text>{JSON.stringify(route)}</Text>
    </View>
  )
}

const ProductScreen = ({ navigation, route }) => {
  return(
    <View>
      <Text>Product Screen </Text>
      <Text>{JSON.stringify(route)}</Text>
    </View>
  )
}

const CustomDrawerContent = ({ props }) => {

  return (
    <DrawerContentScrollView {...props}>
      <DrawerItem
        label="Home"
        onPress={() => props.navigation.navigate('Home')}
      />
      <DrawerItem
        label="Category 1"
        onPress={() =>
          props.navigation.navigate('Main', {
            Screen: 'Category',
            params: { id: 1 },
          })
        }
      />
      <DrawerItem
        label="Category 2"
        onPress={() =>
          props.navigation.navigate('Main', {
            Screen: 'Category',
            params: { id: 101 },
          })
        }
      />
    </DrawerContentScrollView>
  )
}

const MainNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Category" component={CategoryScreen} />
      <Stack.Screen name="Product" component={ProductScreen} />
    </Stack.Navigator>
  )
}

const ApplicationNavigator = () => {

  return (
    <NavigationContainer initialRouteName="Home">
      <Drawer.Navigator
        drawerContent={(props) => {
          return <CustomDrawerContent props={props} />
        }}
      >
        <Drawer.Screen
          name="Home"
          component={HomeScreen}
        />
        <Drawer.Screen
          name="Main"
          component={MainNavigator}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

export default function App() {
  return <ApplicationNavigator />
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    padding: 8,
    backgroundColor: '#FFFFFF',
  },
});

更新

我已经注意到，如果我首先在自定义抽屉内容之外初始化参数（空白，使用值，无论哪个），上面的代码开始按预期工作。

标签： react-nativereact-navigation

react-native - 反应导航嵌套无路由参数 v5

问题描述

解决方案

推荐阅读