将导航传递函数反应到堆栈导航器，然后是标题组件

Question

我有一个带有 react-navigation v3 的 expo react 本机应用程序。

我正在将一个 signOut 函数从我的主应用程序传递到我的堆栈导航器之一的标题组件。我想传递这个标题一次，所以我不想将它添加到每个屏幕的 navigationOptions 中。

我无法访问 MainStackNavigator 中的道具并将函数向下传递给我的组件。

主应用

 render () {
        return (
            <View style={styles.container}>
                <AppNavigator screenProps={{ signOut: this.signOut }}/>
            </View>
        );
    }

AppNavigator

export default createAppContainer(
    createSwitchNavigator({
        // You could add another route here for authentication.
        // Read more at https://reactnavigation.org/docs/en/auth-flow.html
        Main: MainStackNavigator,
    },
    {
        initialRouteName: 'Main'
    })
);

MainStackNavigator

export default createStackNavigator({
    Home: { 
        screen: HomeScreen, 
    }
},{
    initialRouteName: 'Home',
    defaultNavigationOptions : {
        headerTitle: <LogoTitle signOut={this.screenProps.signOut}/>,
        headerMode: 'screen',
    }
});

那么当我传入组件LogoTitle的时候，此时如何访问screenProps呢？

Answer 1

我认为您不能在 createStackNavigator 函数中访问 screenProps。实际上将其传递为screenProps 毫无意义，因为screenProps are accessible in screens/views not Navigators。而且AppNavigator里面还有no screenProps prop。

执行此操作的正确方法是通过在auth.js 文件中定义的signOut 函数，该函数可从任何地方访问。如果您想对用户的退出做出反应，请使用 redux 并更新状态并改为对更新做出反应。

Answer 2

在 react 中传递一些东西是非常典型的任务，在向你展示答案之前，我们需要了解 react 不喜欢无端注入的东西，默认情况下，你需要将它传递给孩子。大多数时候，这意味着如果你有问题，你实际上是有亲子关系的问题，要么上升，要么下降。

因此，为了以一种通用的方式解决您的问题，您可以考虑传递一个可以更改您的screenProps 的函数，而不是screenProps，除非screenProps 始终从孩子的角度读取。

有很多方法可以实现这一点。我只是通过钩子向你展示一种方式

  const [props, setProps] = useState({ default props })
  return (
    <ChildrenComp onChange={setProps} />
  )

从现在开始，您的孩子可以随时通过onChange更换道具。

现在我们又回到了过去，将props 传递给您需要它们的孩子。

对于简单的问题，我不是 redux 的粉丝，如果您了解您的父母和您的孩子，您应该构建您的代码以促进这一点。实在不行的话可以去useContext，实在没办法的话可以去redux。不要在一开始就使用redux，这对入门级编程没有帮助，尤其是当您不能100% 确定react 中的prop 是什么时。