Question

背景

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

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

当渲染组件1时，它完全取代screenProps。但是组件2实际上由tabNavigator控制。因此，当它被加载时，它是tabNavigator中的默认组件，最终为Login。

我希望将screenProps向下传递给多个组件，换句话说，允许从Login组件中的root访问函数，该组件是通过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传递给通过Public加载的TabNavigator子女？

代码

调用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();

这会引发错误，

无法读取属性＆＃39;登录未定义

Answer 1

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

您可以更改公共组件，如下所示

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

或者你可以改变登录组件中的执行，如下所示，

this.props.screenProps();

将screenProp传递给标签导航器

1 个答案: