将 screenProps 传递给选项卡导航器

Question

背景

我有一个根组件来控制 2 个组件的视图。我有条件地渲染这些组件。

我将screenProps 传递给这两个组件，因此我可以从根组件公开function。

当组件 1 被渲染时，它完美地采用了 screenProps。但组件 2 实际上由 tabNavigator 控制。所以当它被加载时，它是tabNavigator 中的默认组件，最终是Login。

我想将screenProps 向下传递多个组件，或者换句话说，从根目录访问Login 组件中的函数，该组件是通过TabNavigator 加载的组件。

示例

<Secure screenProps={{ login: () => this.setState:({ secure: false }) }} />
<Public screenProps={{ login: () => this.setState:({ secure: true }) }} />

Secure takes the component fine. But the  screenProps is called inside of the actual Secure component. The Public component has a TabNavigator. So when I pass screenProps to Public the components loaded via the TabNavigator do not have access to the screen props. 

问题

如何将screenProps 传递给通过TabNavigator 加载的Public 的子代？

代码

调用TabNavigator的组件

const Public = props => (
    <View style={styles.container}>
        {/* <Header
            headerStyle={StyleSheet.flatten(styles.headerColor)}
            headerTitle="wunO"
        /> */}
        <BottomTabNav /* screenProps past here! */ />
    </View>
);

LoginComponent 在PublicComponent 中单击选项卡时加载。

 async getToken() {
      try {
          const tokenKey = 'WUNO-TOKEN';
          const token = await AsyncStorage.getItem(tokenKey, (err) => {
              if (err) {
                  throw err;
              }
              this.props.screenProps.login();
          });
          return token;
      } catch (e) {
          throw e;
      }

}

所以大家一起，

主要组件

<Public screenProps={{ login: () => this.setState({ secure: true }) }} />

公共组件

<BottomTabNav screenProps={props.screenProps.login} />

登录组件

this.props.screenProps.login();

这会引发错误，

无法读取属性“未定义的登录”

Answer 1

这个错误实际上是正确的。在您的登录组件中screenProps 没有登录属性，因为您在公共组件中传递了登录属性的值。

您可以像下面这样更改公共组件，

<BottomTabNav screenProps={{ login: props.screenProps.login}} />

或者您可以在登录组件中更改执行，如下所示，

this.props.screenProps();