如何在功能组件中使用 navigation.navigate 将参数传递给另一个功能组件答案

【问题标题】：How to pass parameter using navigation.navigate at a Functional Component to another Functional Component如何在功能组件中使用 navigation.navigate 将参数传递给另一个功能组件
【发布时间】：2020-06-03 13:10:54
【问题描述】：

我试图在 navigation.navigate 上将值从一个功能组件传递到另一个功能组件，在第一个屏幕上我可以看到它呈现它或在 console.log 上，但是当我尝试打开它时第二个屏幕我得到它“未定义”。这里我将值传递给navigation.navigate：

<TouchableOpacity onPress = {() => navigation.navigate('AuditS',{audit:r.id})} style={styles.button}>

我将在下面发布我的代码，如果有人可以帮助我，我将非常感激。

第一个组件：

import React, { createElement, useState, useEffect  } from 'react';
import { Text, StyleSheet, View,TouchableOpacity,Image} from 'react-native';
import AuditButton from './component/AuditButton'
import axios from 'axios' 

const HomeScreen = ({ navigation }) => {

const [checklists, setChecklists] = useState([]);

useEffect(() => {
axios.get("http://100.13.16.113:8081/api/checklists", {      
              }).then
              (function (response) {
                setChecklists(response.data);
                console.log(response.data);

              }).catch(error => {
                console.log(error);                        
              })
},[]);

return (
<View >
   <Text style={styles.text}> Select an Audit</Text>

  <View style={styles.maincontainer}>
      <View style={styles.container}>
      {checklists.map(r =>(

        <TouchableOpacity onPress = {() => navigation.navigate('AuditS',{audit:r.id})} style={styles.button}>
          <Image source={require('../assets/icons8-audit-80.png')} 
            style={styles.Image}>
          </Image>     
      <Text style={styles.ButtonText}>{r.checklisT_DESCRIPTION}{r.id}</Text>
        </TouchableOpacity >
        ))}
      </View>
  </View>
    <View style={styles.bottomcontainer}>
    <TouchableOpacity onPress = {() => navigation.navigate('Login')}     
    >
    <Text style = {styles.logout}>LOGOUT</Text>
    </TouchableOpacity>
    </View>
</View>

);
};

第二个组件：

import React, { createElement, useState,Component } from 'react';
import { Text, TextInput, StyleSheet, 
View,TouchableOpacity,Image,ScrollView,Modal,TouchableHighlight} from 'react-native';
import {Collapse,CollapseHeader, CollapseBody} from 'accordion-collapse-react-native';
import AuditItem from './component/AuditItem'
import RNPickerSelect from 'react-native-picker-select';
import AuditCategory from './component/AuditCategory';



const AuditScreen = ({ audit, navigation}) =>
{
const [modalInfoVisible, setModalInfoVisible] = useState(false);
const [opNumber, setOP] = useState(false);
const [FGINumber, setFGI] = useState(false);
const [checklistitems, setChecklistitems] = useState([]);
const auditId = audit;
console.log(JSON.stringify(auditId));



return ()

【问题讨论】：

标签： javascript reactjs react-native navigation

【解决方案1】：

如果您正在使用路由器，我建议您使用 react-router-dom。

【讨论】：

【解决方案2】：

对第二个组件进行一些更改，例如

const AuditScreen = () => //some changes in line
 {
 const {audit} = navigation.state.params;  //added line
const [modalInfoVisible, setModalInfoVisible] = useState(false);
const [opNumber, setOP] = useState(false);
const [FGINumber, setFGI] = useState(false);
const [checklistitems, setChecklistitems] = useState([]);
 const auditId = audit;
console.log(JSON.stringify(auditId));
return ()

希望对你有帮助！！！

【讨论】：

我已将代码更改为您告诉我的方式，但现在我收到错误“TypeError: undefined is not an object (evalating 'route.params')”
你的 react 导航版本是什么？
package.json 中的版本是这样的："react-navigation": "^4.3.9",
ok，我说的是版本 5 的变化，等等，我会按照 4 的变化。
感谢@Shan Alam 的回答，我可以找到如何使用 4.x 版的 navigation.navigate 将值从一个功能组件传递到另一个。在第二个屏幕上我不得不添加这个：const {audit} = navigation.state.params;