当我在验证后尝试导航时，undefined 不是 object（评估 _this props.navigation.navigate）

Question

当我在验证到列表数据后尝试导航时，它显示错误作为我的标题？请帮助我是 React Native 的新手。非常感谢我谢谢你们

顺便说一句，我的代码有点奇怪，有什么建议可以让我提升它吗？为了更好的性能和更容易理解？

下面是我的所有代码：

/// 导入代码内容

const listData = [
  {
    tenhs: "nguyen quang ha",
    lop: "12b",
    gioitinh: "nam"
  },
  {
    tenhs: "nguyen hoag sn",
    lop: "11b",
    gioitinh: "nam"
  },
  
]

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: {
        username: null,
        email: null,
        password: null,
        confirm_password: null,
      },
      errors: {
        username: null,
        email: null,
        password: null,
        confirm_password: null,
      },
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit = (event) => {
    if (this.validate()) {
  
      console.log(this.state);

       this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.username = null;
              input.password = null;
              input.email = null;
              input.confirm_password = null;
              return { input };
       });
         this.setState((prevState) => {
              let errors = Object.assign({}, prevState.errors);
              errors.username = null;
              errors.password = null;
              errors.email = null;
              errors.confirm_password = null;
              return { errors };
       });

       this.props.navigation.navigate('listData');
    }
  }

  /// validate code stuff
  render() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center',backgroundColor: '#00ffff',}}>
        <View style={{padding:5}}>

        ///screen code stuff
       
        <TouchableOpacity
          onPress={(e)=>{this.handleSubmit(e);}}
        
          style={{
       ///some styles code 
          }}>
          <Text
            style={{
            some styles code
            }}>
            Đăng Ký
          </Text>
        </TouchableOpacity>
        </View>
      </View>
    );
  }
}

这里是 Listdata 屏幕代码

import React, { Component } from 'react';
import {
  Text,
  Alert,
  TouchableOpacity,
  Button,
  TextInput,
  View,
  StyleSheet,
} from 'react-native';
import { hScale, vScale, fScale } from "react-native-scales";
import styles from '../one/Styles';

const Listdata = [
    {
      id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
      title: "NguyenHoangSon",
    },
    {
      id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
      title: "NguyenHoangSon",
    },
    {
      id: "58694a0f-3da1-471f-bd96-145571e29d72",
      title: "NguyenHoangSon",
    },
  ];
  

  
  export default Listdata;

Answer 1

你的代码有很多地方需要修正，我会尽力帮助你理解导航的工作原理。

实时工作示例：https://codesandbox.io/s/admiring-hugle-ey1yj?file=/src/screens/DetailsScreen.js

您必须在 App.js
您已指定要导航的组件，例如：HomeScreen、DetailsScreen
屏幕应该 return 一个 JSX 元素，而不是一个数组。

以下是了解如何在屏幕之间导航的简单示例。

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

//Screen 1
const HomeScreen = ({ navigation }) =>
{

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

//Screen 2
const DetailsScreen = () => 
{
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}


//App.js
const App = () => 
{

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

当我在验证后尝试导航时，undefined 不是 object（评估 _this props.navigation.navigate）

undefined is no an object( evaluating _this props.navigation.navigate) when i try to navigate after validate

navigation

validation

react-native