如何使用react-native-swipe-list-view获取{native}中的当前平面清单项目数据

分类：编程问答

如何解决如何使用react-native-swipe-list-view获取{native}中的当前平面清单项目数据

我不知道如何获取平面列表的当前项目对象

我使用了react-native-swipeout和react-native-swipe-list-view，在两个示例中我都卡住了。

在Google上，我找到了很大的答案。不仅指出了让我感到困惑的特定问题。

以下是我使用react-native-swipeout插件时的删除功能

const swipeSettings = {
left: [
    {
      text: 'Delete',onPress: () => {
        console.log('-----delete-----');
      },type: 'delete',},}

我需要做的就是，当我点击onpress()按钮时，在delete内获得如下所示的当前项目对象数据。

{
id: 1,prodName : "abcdefg",}

仅此而已，我来自本机脚本背景，在那种框架下，我从未遇到过此类问题。因为文档非常清晰。但是在这里，对我来说，一切似乎都很复杂。 有人可以帮助我。


<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>
          )}
        />

整个页面

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 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--');
  },right: [
    {
      backgroundColor: 'dodgerblue',color: 'white',text: 'Edit',onPress: () => {
        console.log('-----edit-----');
      },],left: [
    {
      backgroundColor: 'red',text: 'Delete',onPress: () => {
        console.log('-----delete-----');
        sqlite_wrapper.deleteById
      },// component : (<ButtonPressable text="delete" />)
    },// buttonWidth: 100,};

const AddProductList = ({route,navigation}) => {
  const {navData} = route.params;

  const [prodName,setProdName] = useState('');
  var [data,setData] = useState(DATA);

  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;

解决方法

因此，如果我正确的话，您可以使用一个通用的滑动设置，以适应列表中的每个元素。

尝试像这样更改Flatlist的renderItem，让我知道它如何为您工作：

<FlatList
    data={data}
    keyExtractor={(item) => item.id}
    renderItem={({ item,index }) => {
        let right = [...swipeSettings.right]; <---- ADDED
        let left = [...swipeSettings.left]; <---- ADDED
        right[0].onPress = () => console.log('edit',item.prodName); <---- ADDED
        left[0].onPress = () => console.log('delete',item.prodName); <---- ADDED
        <Swipeout {...swipeSettings} {...{ right,left}} >    <---- CHANGED
            <View style={styles.listView}>
            <Text style={styles.listViewText}>{item.prodName}</Text>
            </View>
        </Swipeout>
    }}
/>

所以我在这里所做的是将通用的滑动设置发送到Swipeout的每个实例，但是更改了它们的“左”和“右”以覆盖其“ onPress”功能并将其调整为渲染的项目。

我知道很难像这样理解它，这也许不是最好的解释，但我希望它能以某种方式对您有所帮助。

编辑 

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 = ({ route,navigation }) => {
     const { navData } = route.params;

     const [prodName,setProdName] = useState('');
     var [data,setData] = useState(DATA);

     const renderItem = ({ item,index }) => {
          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--');
               },right: [
                    {
                         backgroundColor: 'dodgerblue',color: 'white',text: 'Edit',onPress: () => console.log('-----edit-----',item.prodName)
                    },],left: [
                    {
                         backgroundColor: 'red',text: 'Delete',onPress: () => {
                              console.log('-----delete-----',item.prodName);
                              sqlite_wrapper.deleteById
                         },type: 'delete',// component : (<ButtonPressable text="delete" />)
                    },// buttonWidth: 100,};
          return (
               <Swipeout {...swipeSettings}>
                    <View style={styles.listView}>
                         <Text style={styles.listViewText}>{item.prodName}</Text>
                    </View>
               </Swipeout>
          )
     }

     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={renderItem}
                    />
               </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;

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot