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

我试图在函数组件中使用道具。但函数中有导航组件，如下所示

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

由于

路线，导航

我认为道具没有定义

我试图用函数式的风格来编写示例。 我需要做一些事情，比如在点击时从平面列表中读取当前数据

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, route, 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, rowId, direction) => {
      console.log('---onopen--' + item);
    },
    right: [
      {
        backgroundColor: 'dodgerblue',
        color: 'white',
        text: 'Edit',
        onPress: () => {
          console.log('-----edit-----');
        },
      },
    ],
    left: [
      {
        backgroundColor: 'red',
        color: 'white',
        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',
    alignSelf: 'stretch',
    alignItems: 'center',
    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;

import React，{useState}来自“React”；
从“react native animatable”导入{View}；
进口{
文本输入，
可触摸不透明度，
平面列表，
}来自“反应本机手势处理程序”；
从“反应本机矢量图标/FontAwesome”导入图标；
从“react native”导入{样式表，可按，文本，按钮}；
从“react native Animatable”导入*作为可设置动画；
从“react native Swipeout”导入Swipeout；
从“../../components/ButtonPressable”导入ButtonPressable；
var sqlite_wrapper=require（'./sqliteWrapper'）；
常数数据=[
{
prodName：“添加的数据将如下所示”，
},
];
const AddProductList=（{item，route，navigation}）=>{
const{navData}=route.params；
常量[prodName，setProdName]=useState（“”）；
var[data，setData]=使用状态（data）；
常数swipeSettings={
风格：{
marginBottom:10，
},
自动关闭：错误，
背景色：“透明”，
关闭：错误，
残疾人士:错,，
onClose：（sectionID、rowId、direction）=>{
log（'--onclose--'）；
},
onOpen：（节ID、行ID、方向）=>{
console.log（'--onopen--'+项）；
},
对:[
{
背景颜色：“道奇蓝”，
颜色：'白色'，
文本：“编辑”，
onPress:（）=>{
console.log（'----edit-----'）；
},
},
],
左：[
{
背景颜色：“红色”，
颜色：'白色'，
文本：“删除”，
onPress:（）=>{
console.log（'----delete-----'）；
sqlite_wrapper.deleteById；
},
键入：“删除”，
//组成部分：（）
},
],
//按钮宽度：100，
};
返回(
setProdName（值）}
占位符=“添加产品”
defaultValue={prodName}
/>
{
sqlite_包装器
.insert（{prodName:prodName}，sqlite_包装器.collection_产品）
。然后（（结果）=>{
log（'--result--'）；
控制台日志（结果）；
if（result.rowsAffected）{
fetchAllData（）；
}
});
函数fetchAllData（）{
sqlite_包装器
.readAll（sqlite\u包装器.collection\u产品）
。然后（（结果数据）=>{
log（'--resultData--'）；
console.log（resultData）；
setData（结果数据）；
setProdName（“”）；
});
}
//如果没有sql，这就是如何更新具有数组的状态
//常量updateArray=[…数据]；
//updatedArray.push（{prodName:prodName}）；
//setData（更新阵列）；
//setProdName（“”）；
}}>
项目id}
renderItem={（{item，index}）=>(
{item.prodName}
)}
/>
);
};
var styles=StyleSheet.create({
容器：{
弹性：1，
},
inputFieldView：{
flexDirection:'行'，
对齐项目：“居中”，
自我定位：“拉伸”，
差额：10，
},
文本输入：{
弹性：1，
背景颜色：“#b2ebf2”，
borderTopLeftRadius:7，
边界半径：7，
尺寸：16，
},
添加视图：{
背景颜色：“#0f4c75”，
自我定位：“拉伸”，
对齐项目：“居中”，
为内容辩护：“中心”，
borderTopEndRadius:7，
borderBottomEndRadius:7，
填充：9，
},
加：{
填充：7，
},
列表视图：{
填充：20，
背景颜色：“绿色”，
保证金：0，
边界半径：0，
},
listViewText：{
颜色：'白色'，
},
});
导出默认的AddProductList；

将您的组件更改为此

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

...
}

说明：您已经在进行对象销毁，所以道具是全部的，即主父级，但导航、路线是 比如：

---

这不是问题，通过这种方式我也学会了。。。你可以投票接受我的回答，我还是不确定<代码>{item，route，navigation}并像

console.log（'--onopen--'+item）一样打印。我投票不接受Kay你能试试这个吗。。const AddProductList=（props）=>{…}和console props我不能这样做，因为您已经看到了我的完整代码。如果你发现它可以像你说的那样写，请告诉我。我已更新了问题。我认为项目未从家长处正确传递。。看一看，这就是为什么它给undefinedRock，你能在这里分享你的完整代码吗？@Riddhi我已经分享了，请看一看
props: {
   navigation,
   route,
   ...
}