时间戳

首页 > 解决方案 > 如何在功能组件中使用 navigation.navigate 将参数传递给另一个功能组件

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

问题描述

我试图在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 ()

标签： javascriptreactjsreact-nativenavigation

解决方案

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

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

希望能帮助到你！！！

推荐阅读