如何使用反应导航 5 导航其他屏幕

Question

我的 onpress 移动屏幕目前有问题。它说 undefined 不是一个对象（评估'_this2.props.navigation.navigate'）主要目标是当我按下这个文本时，我的屏幕将在政策屏幕上移动。只是提供更多细节，我在这个组件中创建了 navigation.js 组件，我为（登录、注册、策略）创建了堆栈屏幕，所以现在，我有一个任务，当我按下复选图标模式时，注册屏幕上会弹出。在该模式内有一个 Policy 可点击文本，当我按下该文本时，我的屏幕将移动到 Stack.Screen Policy。

Onpress 功能：

onPress={() => this.props.navigation.navigate('Policy')}

堆栈屏幕：

 <Stack.Screen 
     name="Policy" 
     component={PrivacyPolicy} 
     options={{
        headerShown: false,
     }}
 />

错误：

完整代码：

    import React, {useState} from 'react';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Login from '../screens/Login';
import Register from '../screens/Register';
import PrivacyPolicy from '../screens/PrivacyPolicy';
import {Button,TouchableOpacity,View,Modal,Text, Alert, TouchableHighlight, StyleSheet, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Overlay} from 'react-native-elements';
import CheckBox from '@react-native-community/checkbox';

const Stack = createStackNavigator();

class Navigator extends React.Component {
    
    constructor(props) {
        super(props);

        this.state = {
            modalVisible: false
        }
    }

    setModalVisible = (visible) => {
        this.setState({ modalVisible: visible });
    }

    PrivacyModalShow() {
        const { modalVisible } = this.state;

        return (
        <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
                this.setModalVisible(false);
            }}
            >
                <ScrollView>
                    <View style={styles.centeredView}>
                        <View style={styles.modalView}>

                            <Text style={styles.modalText}>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac enim odio. Curabitur at dui a velit bibendum aliquet. Suspendisse elit erat, posuere eget tellus eget, maximus tristique sapien. Integer ornare erat a turpis aliquam, et scelerisque metus congue. Nulla turpis ante, rutrum ac massa egestas, ultrices blandit est. Etiam lectus nisl, viverra vel gravida quis, lacinia nec sapien. Etiam eu facilisis leo. Duis ac aliquam ante. Donec vel velit ipsum. Morbi tempor erat consectetur, aliquet augue nec,
                                tristique nibh. In hendrerit sem non aliquet convallis. Donec molestie mauris sit amet quam posuere euismod.
                            </Text>

                            <View style={styles.checkboxContainer}>
                                <CheckBox
                                />
                                <Text style={styles.label}>I have read and agree to the <Text onPress={() => this.props.navigation.navigate('Policy')} style={{textDecorationLine:'underline', color:'#4ABDFF', fontWeight:'bold', fontSize:17}}>terms and condition and data privacy policy</Text></Text>
                            </View>

                            <View style={styles.confirmationContainer}>
                                <Text style={{fontSize:17,textAlign:"right",flex:1, fontWeight:'bold'}} onPress={() => {
                                this.setModalVisible(!modalVisible);
                                }}>No</Text>
                                <Text style={{marginLeft:30,fontSize:17,textAlign:"right",  color:'#4ABDFF', fontWeight:'bold'}}>Yes, Agree</Text>
                            </View>
                        </View>
                    </View>
                </ScrollView>
            </Modal>
        )
    }

    render() {        
        return (
            <NavigationContainer>
               
                    <Stack.Navigator>
                        <Stack.Screen 
                            name="Login" 
                            component={Login} 
                            options={{
                                headerShown: false,
                            }}
                        />

                        <Stack.Screen 
                            name="Registration" 
                            component={Register} 
                            options={{
                                headerStyle: {
                                    backgroundColor: '#4ABDFF'
                                },
                                headerTitleStyle: {
                                    color: '#fff',
                                },
                                headerTintColor:'#fff',
                                headerRight: () => (
                                    <View style={{flexDirection: "row",justifyContent: "flex-end",paddingRight:10,width: 120}}>
                                    <TouchableOpacity
                                        onPress={() => this.setModalVisible(true) }
                                        >
                                        <Icon type="font-awesome" name="check" size={20} color="white" />
                                        </TouchableOpacity>
                                    </View>
                                ),
                            }}
                        
                        />

                        <Stack.Screen 
                            name="Policy" 
                            component={PrivacyPolicy} 
                            options={{
                                headerShown: false,
                            }}
                        />
                </Stack.Navigator>
                {this.PrivacyModalShow()}
            </NavigationContainer>
            
        );
    }

}

const styles = StyleSheet.create({
    centeredView: {
      marginTop: 22,
      width:'100%'

    },
    checkboxContainer: {
        flexDirection: "row",
        marginBottom: 0,
    },
    confirmationContainer: {
        flexDirection: "row",
    },
    label: {
        margin: 6,
        fontSize:17
    },
    confirmationLabel: {
        
        fontSize:17,
        textAlign:'right',
        flex:1
    },
    modalView: {
      margin: 30,
      backgroundColor: "white",
      borderRadius: 5,
      padding: 35,
      shadowOpacity: 0.5,
      shadowRadius: 2,
      elevation: 5,
      maxWidth:'100%'
    },
    textStyle: {
      color: "white",
      fontWeight: "bold",
    },
    modalText: {
      marginBottom: 5,
      fontSize:17,
    }
});
  

export default Navigator;

Answer 1

将 PrivacyModalShow() 函数转换为箭头函数：

PrivacyModalShow = () => {

...

}

或者将 this 绑定到构造函数内的 PrivacyModalShow()：

constructor(props) {
    super(props);

    this.PrivacyModalShow = this.PrivacyModalShow.bind(this);

    ...
}