我正试图通过AppContainer传递道具。我能够通过其他组件传入,但我无法弄清楚如何通过createAppContainer发送道具
在App.js中:
render() {
return (
this.state.isLoggedIn ? <DrawerNavigator /> :
<SignedOutNavigator handler={this.saveUserSettings} />
)
}
在SignedOutNavigator中:
import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import LoginScreen from "../screens/LoginScreen";
const SignedOutNavigator = createStackNavigator({
Login: {
// screen: LoginScreen
screen: props => <LoginScreen screenProps={value => {
// I need to access props from here
// like this.props.handler(value)
}} />,
navigationOptions: ({ navigation }) => ({
header: null,
}),
}
});
export default createAppContainer(SignedOutNavigator);
你必须在screenProps
下调整道具的范围才能在screen
级别访问它。
// App.js
<AppNavigator
screenProps={{
handler: () => {},
hello: "World"
}}
/>
// Navigator.js
const StackNavigator = createStackNavigator({
Login: {
screen: ({ screenProps, navigation }) => {
screenProps.handler();
// ...
},
},
})
好的,我在Samuel Vaillant的帮助下完成了这个工作。我不得不做一些修改。
我的App.js:
render() {
return (
this.state.isLoggedIn ? <DrawerNavigator /> : <SignedOutNavigator
screenProps={{
handler: (settings) => { this.saveUserSettings(settings) }
}}
/>
)
}
我的SignedOutNavigator:
import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import LoginScreen from "../screens/LoginScreen";
const SignedOutNavigator = createStackNavigator({
Login: {
// screen: LoginScreen
screen: screenProps => <LoginScreen screenProps={value => {
screenProps.screenProps.handler(value)
}} />,
navigationOptions: ({ navigation }) => ({
header: null,
}),
}
});
export default createAppContainer(SignedOutNavigator);