Как передать опору компоненту экрана навигации - React Native

Question

Я довольно новичок в React native. Я создал Навигатор ящиков в моем файле приложения. js.

Один из моих компонентов навигации - это компонент с именем LoginScreen .

Я пытаюсь передать реквизит LoginScreen для отображения, когда пользователь переходит к нему.

Приложение. 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), он говорит, что его не определено.

Answer 1

Ответ Асада фактически помог мне добраться до этого:

Приложение. js (Навигация)

Здесь мы можем добавить 'initialParams' параметр для <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>
    )
}

Answer 2

Вы можете передавать параметры с помощью второго аргумента функции навигации:

onPress(user) {
  this.props.navigation.navigate(
    'DetailPage',
    { user },
  );
}

И затем обращаться к ним в this.props.navigation.state.params . Например, в вашей DetailsPage:

<Text style={styles.myStyle}>{this.props.navigation.state.params.user.name}</Text>

Вот ссылка, в которой вы найдете пример

https://reactnavigation.org/docs/1.x/params/

https://reactnavigation.org/docs/params/