时间戳

首页 > 解决方案 > React-Navigation：一旦父屏幕重新渲染，如何更改传递给子屏幕的参数？

react-native - React-Navigation：一旦父屏幕重新渲染，如何更改传递给子屏幕的参数？

问题描述

我有两个屏幕，一个用于文档（父），一个用于每个文档（子），当按下我的平面文档列表中的文档时，它会导航到文档屏幕，在该屏幕上我可以执行 CRUD 操作，其中一个正在给出标签到文档，这部分是必要的，因为为了发送文档，它必须被标记，但是当我标记文档时，数据库接收 PUT 请求并更新元素，但子屏幕没有得到新的更新对象，我只有当我导航回文档然后再导航到文档时才能发送。我该如何解决这个问题？

这是我的文档标签功能：

const LabelItem=()=>{
  const modefiedFile=new FormData();
  modefiedFile.append('file', {
    uri:  fileUri,
    name: fileTitle,
    type: 'file/pdf'})
  modefiedFile.append('label',Label)
  
  const headers={
    Accept:'application/json',
    'Content-Type': 'multipart/form-data'
    }
   console.log(modefiedFile)
   axios
   .put(`http://192.168.1.17:8000/File/${key}/`,modefiedFile,{headers:headers})
   .then((response)=> {response})
   .then((error)=>{console.log(error)})            
  setSecondModal(false)
  
}

这是发送的按钮：

 <View style={footerStyle.footer}>
        <TouchableOpacity onPress={()=> {
          label!='none'?
          props.navigation.navigate('Envoi'): openAlert()
          console.log(label)
          }}>
          <Icon style={footerStyle.ellipsis}  name="share" />
          </TouchableOpacity>

这是来自父导航：

 <TouchableOpacity onPress={()=>props.navigation.navigate('Document',{url:{uri: `${item.file}`, file:`${item.title}`,key:`${item.id}`,label:`${item.label}`}})}>
      <View  style={DocumentStyle.flatitem}>
          <Icon style={DocumentStyle.pdf} name="file-pdf-o" color="#666"/>
          <Text style={DocumentStyle.itemtext}> {item.title}</Text>
         
      </View>
    </TouchableOpacity>

标签： react-nativereact-navigation

解决方案

为此，您必须更改子屏幕上的项目并将该项目传递给父屏幕。请看这个。

这是列表屏幕。

import React from 'react';
import { useState } from 'react';
import { SafeAreaView,  FlatList, StyleSheet,DeviceEventEmitter, Text, StatusBar, TouchableOpacity } from 'react-native';
const App = ({navigation}) => {
  
  DeviceEventEmitter.addListener("imagechange", (eventData) => {
      onSelect(eventData)
  })

  const [data , setData] = useState([
    {id: '1',title: 'First Item'},
    {id: '2',title: 'Second Item'},
    {id: '3',title: 'Third Item'},
    {id: '4',title: 'Fourth Item'},
    {id: '5',title: 'Fifth Item'},
    {id: '6',title: 'Sixth Item'},
    {id: '7',title: 'seventh Item'},
    {id: '8',title: 'eight Item'},
    {id: '9',title: 'nineth Item'},
  ])
  
const onSelect = item => {
 // let id = data.findIndex((obj => obj.id == item.id));
  // const newstate =  {...data,data[id].title = item.title}
  const newState = data.map(obj =>
    obj.id === item.id ? { ...obj, title: item.title } : obj
  );
  setData(newState)
  };

const  onPress = (item) => {
    navigation.navigate("Details", {item});
  };

  const renderItem = ({ item }) => (
    <TouchableOpacity style={styles.item} 
      onPress={() => onPress(item)}>
      <Text style={styles.title}>{item.title}</Text>
    </TouchableOpacity>
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

这是我正在更改对象的详细信息屏幕。

 import * as React from 'react';
import { useState, useEffect } from 'react';
import { View, Text, StyleSheet,DeviceEventEmitter, TouchableOpacity } from 'react-native';
function DetailsScreen ({navigation, route}) {
    const  [item, setItem] = useState(route.params.item)
    let data = route.params.item;
    
    
    
    const updatevalue = () => {
      setItem({...item,title:"updated"})
      navigation.goBack();
      DeviceEventEmitter.emit("imagechange",{...data,title:"updated this value"});
     // route.params.onSelect({...data,title:"updated this value"});
    }

    // useEffect(() => {
    //   return () => {
    //       DeviceEventEmitter.removeAllListeners()
    //     };
    //   }, []);
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>{item.title}</Text>
        
        <TouchableOpacity style={styles.button} onPress={() => updatevalue()}>
           <Text style={{color:"#fff"}}>Update Value</Text>
        </TouchableOpacity>
      </View>
    );
  }

export default DetailsScreen

const styles  = StyleSheet.create({
  button:{
    marginTop:20,
    backgroundColor:"#333333", 
    borderRadius:10, 
    paddingHorizontal:20, 
    paddingVertical:5,
  }
})

这是git repos的链接

推荐阅读