Question

我正在尝试将值从一个功能组件传递到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 ()

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

希望有帮助！

如何使用功能组件上的navigation.navigate将参数传递给另一个功能组件

2 个答案: