如何将 Prop 传递给导航屏幕组件 - React Native

我对 React Native 还很陌生。我在 App.js 文件中创建了一个抽屉导航器。

我的导航组件之一是一个名为登录界面.

我正在尝试将道具传递给登录界面当用户导航到它时显示。

App.js（导航器）

const Tab = createMaterialBottomTabNavigator()
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()

export default class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            isAdmin: 'false',
            checked: false,
        }
    }

    async componentDidMount() {
        try {
            const adm = await AsyncStorage.getItem('is_admin')
            if (adm == null) {
                adm = await AsyncStorage.setItem('is_admin', 'false')
            }
            this.setState({ isAdmin: adm, checked: true })
        } catch (error) {
            console.log(error)
        }
    }


    render() {
        const { isAdmin } = this.state
        console.log(isAdmin)

        //is admin
        return isAdmin == 'true' ? (
            <NavigationContainer>
                <Drawer.Navigator initialRouteName="Home">
                    <Drawer.Screen name="Home" component={MyStack} />

                    <Drawer.Screen
                        name="Admin Panel"
                        component={props => {
                            return <LoginScreen props={props} propName = {'Hello'} />
                        }}
                    />
                </Drawer.Navigator>
            </NavigationContainer>
        ) : (
            //ISNOT ADMIN
            <NavigationContainer>
                <Drawer.Navigator initialRouteName="Home">
                    <Drawer.Screen name="Home" component={MyStack} />

                    <Drawer.Screen name="Login" component={LoginScreen} />
                </Drawer.Navigator>
            </NavigationContainer>
        )
    }
}

LginScreen.js

    const LoginScreen = ({ navigation, propName }) => {
       // const [bridge, setB] = useState(false)

        return (
            <SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
                <TopHeader
                    onRefresh={() => fetch_crossings}
                    onMenuToggle={() => navigation.toggleDrawer()}
                />

                <View style={{ flex: 1 }}>
                    <View
                        style={{
                            backgroundColor: '#fff',
                            margin: 10,
                            borderRadius: 5,
                            alignItems: 'center',
                            padding: 10,
                            paddingBottom: scale(20),
                        }}
                    >
                        <Avatar
                            rounded
                            size={'xlarge'}
                            overlayContainerStyle={{
                                backgroundColor: '#185a9d',
                            }}
                            icon={{
                                color: 'orange',
                                type: 'ionicon',
                                name: 'ios-log-in',
                            }}
                        />
                        <Input
                            placeholder="  Email"
                            placeholderTextColor={'#292b2c'}
                            style={{ margin: 5 }}
                            errorStyle={{ color: '#d9534f' }}
                            leftIcon={<Icon name="mail" color="#292b2c" />}
                            errorMessage="Enter a valid Email"
                        />

                        <Divider
                            style={{
                                backgroundColor: 'orange',
                                height: 3,
                                margin: scale(20),
                                borderRadius: 3,
                            }}
                        />
                        <Input
                            placeholder="  Password"
                            placeholderTextColor={'#292b2c'}
                            secureTextEntry={true}
                            style={{ margin: 5 }}
                            errorStyle={{ color: '#d9534f' }}
                            leftIcon={<Icon name={'lock'} color="#292b2c" />}
                            errorMessage="Enter a valid Email"
                        />
                    </View>
                    <View
                        style={{
                            backgroundColor: '#fff',
                            margin: 10,
                            marginTop: 0,
                            borderRadius: 5,

                            padding: 10,
                        }}
                    >
                        <Button
                            buttonStyle={{
                                margin: 10,
                                backgroundColor: '#5cb85c',
                                borderRadius: 4,
                                alignSelf: 'stretch',
                            }}
                            onPress={async () => {
                                try {
                                    await AsyncStorage.setItem('is_admin', 'false')
                        **console.log(propName);** //<--Right HERE

                                    navigation.navigate('Home')

                                } catch (error) {
                                    console.log(error)
                                }
                            }}
                            icon={<Icon name="send" size={15} color="white" />}
                            iconRight
                            titleStyle={{ fontWeight: 'bold' }}
                            title="Submit  "
                        />
                        <Button
                            buttonStyle={{
                                margin: 10,
                                backgroundColor: '#d9534f',
                                borderRadius: 4,
                                alignSelf: 'stretch',
                            }}
                            onPress={() => {
                                navigation.navigate('Home')
                            }}
                            icon={<Icon name="close" size={15} color="white" />}
                            iconRight
                            titleStyle={{ fontWeight: 'bold' }}
                            title={'Close '}
                        />
                    </View>
                </View>
            </SafeAreaView>
        )
    }

    export default LoginScreen

每当我console.log(propName)，它说它未定义。

阿萨德的回答实际上帮助我做到了这一点：

App.js（导航）

在这里，我们可以添加'初始参数'参数为<Drawer.Screen/> :

 <Drawer.Screen
    name="Login"
    component={LoginScreen}
    initialParams={{ post: this.state.isAdmin }} //<-- Right here
 />

然后我们可以在 LoginScreen.js 中这样接收 :

const LoginScreen = ({ navigation, route }) => {

    console.log(route.params.post)
    return (
        <Text>{route.params.post}</Text>
    )
}