javascript - 如何通过类组件在本机最新版本中浏览屏幕？

Question

在文档中，它们仅显示功能组件的示例，而不是类组件。请告诉用于导航（堆栈）的必要包和库，并帮助我解决此错误...

我的代码...

    import "react-native-gesture-handler";
    import React from "react";
    import {Text,View,StyleSheet,TouchableOpacity} from "react-native";
    import SomeText from "./components/SomeText";
    import { NavigationContainer } from "@react-navigation/native";
    import {createStackNavigator} from "@react-navigation/stack"
    import NextScreen from "./NextScreen";

    const stack =createStackNavigator();

    function myStack(){

    return(
    <NavigationContainer>
        <stack.Navigator>
        
            <stack.Screen name="home" component={App} />
            <stack.Screen name="nestedScreen" component={NextScreen}/>

        </stack.Navigator>
    </NavigationContainer>
    );

    }

    export default class App extends React.Component{
    state={
    displayText:"Logged Out"
     };


    render(){
    return(
    <View style={styles.classname}>

    <TouchableOpacity onPress={
      () =>{
        this.setState({
          displayText:"Logged In"
        })
      }

     
    }>
      <SomeText name={"LOG IN"} text="sample"/>

    </TouchableOpacity>

    <TouchableOpacity onPress={
      () => {
        
        this.setState({
          displayText:"Logged Out"
        });
        
      }
    }>
      <SomeText name={"LOG OUT"}/>

    </TouchableOpacity>

    <Text>
        {this.state.displayText}
    </Text>
    <TouchableOpacity onPress={()=>(this.props.navigation.navigate("nextScreen"))}>

      <SomeText name={"Navigation"}/>

    </TouchableOpacity>

    </View>

     );
    }
   }
 const styles=StyleSheet.create({
 classname:{
 flex:1,
 alignItems:"center",
 backgroundColor:"orange",
 justifyContent:"center"

 }



  });   

我得到这个代码的错误是：未定义不是一个对象（评估'_this2.props.navigation.navigate'）

标签： javascriptreactjsreact-native