如何使用选项卡导航器将道具传递给 Screen 组件？

Question

这是我在 StackOverflow 上的第一篇文章，如果我没有遵循正确的格式，敬请见谅。

我正在使用 tab navigator from React Navigation v 5.x 构建我的第一个应用程序，并且在将道具从一个屏幕传递到另一个屏幕时遇到了一个大问题

我想要实现的是：

1. 在我的一个屏幕中更改数据列表。
2. 让这些更改影响另一个屏幕上发生的事情。

我已经尝试过 这个（我没有设置要传递的道具）， 这个（不推荐使用的 react-navigation 版本）和 这个（也是 react-navigation 的旧版本）。

和 Redux，但当前版本的反应导航没有可用的示例。

我已经走到了尽头，真的需要逐步了解如何实现这一目标。这是我想要做的粗略草图：

我认为它的方式是通过回调将父状态作为道具发送，但我找不到通过最新版本的反应导航中的屏幕组件发送道具的方法……

这是我的导航设置：

 const Tab = createBottomTabNavigator()

export default class MyApp extends Component{

    constructor(props) {
        super(props);
    }

    render(){
        return (
            <NavigationContainer>
                <Tab.Navigator
                    screenOptions={({ route }) => ({
                        tabBarIcon: ({ focused, color, size }) => {
                            let iconName;

                            if (route.name === 'My tests') {
                                iconName = focused ? 'ios-list-box' : 'ios-list';
                            } else if (route.name === 'Testroom') {
                                iconName = focused ? 'ios-body' : 'ios-body';
                            }

                            return <Ionicons name={iconName} size={size} color={color} />;
                        },
                    })}
                    tabBarOptions={{
                        activeTintColor: 'tomato',
                        inactiveTintColor: 'gray',

                    }}>

                    <Tab.Screen name="My tests"  component={MyTests}/> //This is where I want to send props
                    <Tab.Screen name="Testroom" component={TestRoom} />  //This is where I want to send props

                </Tab.Navigator>
            </NavigationContainer>
        )
    }
}

我读过 这个，但这对我来说毫无意义。这如何适合组件树？什么去哪里？请帮忙！

原文由 weedskurt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以使用属性“children”来传递一个元素类型 jsx，而不是属性“component”，这是 react-native 推荐的。

通过这种方式，您可以将道具传递给组件示例：

     <tab.Screen
    name="home"
       children={()=><ComponentName propName={propValue}/>}
    />

必须使用 ‘()=>’ 因为属性 children 需要一个返回 jsx 元素的函数，它是功能性的。

原文由 Oscar Urueta 发布，翻译遵循 CC BY-SA 4.0 许可协议