如何在具有导航组件的功能中使用道具

如何解决如何在具有导航组件的功能中使用道具

我正在尝试在功能组件中使用道具。但是该功能具有导航组件，如下所示。

const AddProductList = ({props,route,navigation}) => {
  const {navData} = route.params;
  var [data,setData] = useState(DATA);
...
...
...
}

因为route,navigation我认为道具是不确定的。

我正在尝试纯粹以功能样式编写this示例。 我需要做一些事情，例如从轻按列表中读取当前数据。

var id = props.item.product_id_to_delete

因为道具是不确定的，所以我没有获取物品ID来删除被点击的物品。 有人可以帮助我。

查看完整代码

import React,{useState} from 'react';
import {View} from 'react-native-animatable';
import {
  TextInput,TouchableOpacity,FlatList,} from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/FontAwesome';
import {StyleSheet,Pressable,Text,Button} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Swipeout from 'react-native-swipeout';
import ButtonPressable from '../../components/ButtonPressable';
var sqlite_wrapper = require('./sqliteWrapper');

const DATA = [
  {
    prodName: 'Added data will look like this',},];

const AddProductList = ({item,navigation}) => {
  const {navData} = route.params;
  const [prodName,setProdName] = useState('');
  var [data,setData] = useState(DATA);

  const swipeSettings = {
    style: {
      marginBottom: 10,autoClose: false,backgroundColor: 'transparent',close: false,disabled: false,onClose: (sectionID,rowId,direction) => {
      console.log('---onclose--');
    },onOpen: (sectionID,direction) => {
      console.log('---onopen--' + item);
    },right: [
      {
        backgroundColor: 'dodgerblue',color: 'white',text: 'Edit',onPress: () => {
          console.log('-----edit-----');
        },],left: [
      {
        backgroundColor: 'red',text: 'Delete',onPress: () => {
          console.log('-----delete-----');
          sqlite_wrapper.deleteById;
        },type: 'delete',// component : (<ButtonPressable text="delete" />)
      },// buttonWidth: 100,};

  return (
    <View style={styles.container}>
      <Animatable.View
        animation="bounceIn"
        duration={1000}
        style={styles.inputFieldView}>
        <TextInput
          style={styles.textInput}
          onChangeText={(value) => setProdName(value)}
          placeholder="Add the Product"
          defaultValue={prodName}
        />
        <TouchableOpacity
          style={styles.addView}
          onPress={() => {
            sqlite_wrapper
              .insert({prodName: prodName},sqlite_wrapper.collection_product)
              .then((result) => {
                console.log('---result---');
                console.log(result);
                if (result.rowsAffected) {
                  fetchAllData();
                }
              });

            function fetchAllData() {
              sqlite_wrapper
                .readAll(sqlite_wrapper.collection_product)
                .then((resultData) => {
                  console.log('---resultData---');
                  console.log(resultData);
                  setData(resultData);
                  setProdName('');
                });
            }

            // without sql this is how to update the state having a array
            // const updatedArray = [...data];
            // updatedArray.push({prodName: prodName});
            // setData(updatedArray);
            // setProdName('');
          }}>
          <Icon name="plus" size={16} style={styles.add} color="white" />
        </TouchableOpacity>
      </Animatable.View>
      <Animatable.View
        animation="bounceInLeft"
        duration={1500}
        style={{flex: 1}}>
        <FlatList
          data={data}
          keyExtractor={(item) => item.id}
          renderItem={({item,index}) => (
            <Swipeout {...swipeSettings}>
              <View style={styles.listView}>
                <Text style={styles.listViewText}>{item.prodName}</Text>
              </View>
            </Swipeout>
          )}
        />
      </Animatable.View>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    flex: 1,inputFieldView: {
    flexDirection: 'row',alignItems: 'center',alignSelf: 'stretch',margin: 10,textInput: {
    flex: 1,backgroundColor: '#b2ebf2',borderTopLeftRadius: 7,borderBottomLeftRadius: 7,fontSize: 16,addView: {
    backgroundColor: '#0f4c75',justifyContent: 'center',borderTopEndRadius: 7,borderBottomEndRadius: 7,padding: 9,add: {
    padding: 7,listView: {
    padding: 20,backgroundColor: 'green',margin: 0,borderRadius: 0,listViewText: {
    color: 'white',});

export default AddProductList;

解决方法

将组件更改为此...

const AddProductList = ({item,route,navigation}) => {
  const {navData} = route.params;
  var [data,setData] = useState(DATA);
  var id = item.product_id_to_delete

...
}

说明：您已经在进行对象破坏，所以props就是全部，即主要父对象，但是导航，route是 喜欢：

props: {
   navigation,...
}