如何使用 navigation.navigation 将参数传递到另一个功能组件

Question

我正在尝试在navigation.navigate上将值从一个功能组件传递到另一个功能组件，在第一个屏幕上，值在那里，我可以看到它呈现它或在控制台上.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 ()

Answer 1

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

Answer 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 ()

希望对您有所帮助!!