React-Native v6调用navigation.navigate传递route params失败排查

React Navigation的Stack.Screen会默认给绑定的页面组件注入navigation和route两个props，你的代码里Room路由绑定的组件是Redux，所以两个props都会传给Redux组件，但你在Redux组件里只接收并透传了navigation给App，没有处理route，所以App里的route自然是undefined。

修改redux.js的代码，接收route参数并透传给App组件即可：

import React from 'react';
import App from './App';
import store from './store';
import { Provider } from 'react-redux';
import { Provider as PaperProvider } from 'react-native-paper';

// 新增接收route参数
const Redux = ({ navigation, route }) => {
    return (
        <Provider store={store}>
            <PaperProvider>
                {/* 把route也传给App */}
                <App navigation={navigation} route={route} />
            </PaperProvider>
        </Provider>
    );
};

export default Redux;

修改完成后，App.js中就能正常读取route.params.roomID的参数值。

如果后续还有更多页面需要使用Redux和PaperProvider的能力，可以直接把两个Provider套在NavigationContainer外层，省去单独写中转组件、透传props的重复工作：
修改index.js代码：

import React from 'react';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import { NavigationContainer } from '@react-navigation/native';
import Home from './Home';
import App from './App';
import store from './store';
import { Provider } from 'react-redux';
import { Provider as PaperProvider } from 'react-native-paper';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const AppRedux = () => (
    <Provider store={store}>
        <PaperProvider>
            <NavigationContainer>
                <Stack.Navigator initialRouteName="Home">
                    <Stack.Screen name="Home" component={Home} />
                    {/* 直接绑定App作为页面组件，无需中转 */}
                    <Stack.Screen name="Room" component={App} />
                </Stack.Navigator>
            </NavigationContainer>
        </PaperProvider>
    </Provider>
);

AppRegistry.registerComponent(appName, () => AppRedux);

调整后所有页面都能直接拿到React Navigation注入的props，也能正常使用Redux、Paper的相关能力。

内容的提问来源于stack exchange，提问作者jrcichra