将屏幕道具传递给选项卡导航器

Question

Background

我有一个根组件，可以控制 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传递给通过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();