react-native-swipe-list-view
<SwipeListView> is a vertical ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened.
Also includes <SwipeRow> if you want to use a swipeable row outside of the <SwipeListView>
For use with RN 0.60+ please use react-native-swipe-list-view@2.0.0+
RN 0.60 and RNSLV 2.0.0 deprecate the use of ListView entirely, please see example.js for examples and see the migrating-to-flatlist doc for a migration guide if you aren't already using FlatList.
The useFlatList prop is no longer required, as FlatList is the default ListView used.
Example
Try it out! https://snack.expo.io/@jemise111/react-native-swipe-list-view
Installation
npm install --save react-native-swipe-list-view
Running the example
The application under ./SwipeListExample will produce the above example. To run execute the following:
git clone https://github.com/jemise111/react-native-swipe-list-view.gitcd react-native-swipe-list-viewcd SwipeListExampleyarncd iospod installcd ..react-native run-ios | react-native run-android
Android: If you get the following error
SwipeListExample/android/app/debug.keystore' not found for signing config 'debug'.:cd android/app/ && keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000 // answer the questions cd ../..
Usage
import { SwipeListView } from 'react-native-swipe-list-view';
//... note: your data array objects MUST contain a key property
// or you must pass a keyExtractor to the SwipeListView to ensure proper functionality
// see: https://reactnative.dev/docs/flatlist#keyextractor
this.state.listViewData = Array(20)
.fill("")
.map((_, i) => ({ key: `${i}`, text: `item #${i}` }));
//...
render() {
return (
<SwipeListView
data={this.state.listViewData}
renderItem={ (data, rowMap) => (
<View style={styles.rowFront}>
<Text>I am {data.item.text} in a SwipeListView</Text>
</View>
)}
renderHiddenItem={ (data, rowMap) => (
<View style={styles.rowBack}>
<Text>Left</Text>
<Text>Right</Text>
</View>
)}
leftOpenValue={75}
rightOpenValue={-75}
/>
)
}
See example.js for full usage guide (including using <SwipeRow> by itself)
Note:
If your row is touchable (TouchableOpacity, TouchableHighlight, etc.) with an onPress function make sure renderItem returns the Touchable as the topmost element.
GOOD:
renderItem={ data => (
<TouchableHighlight onPress={this.doSomething.bind(this)}>
<View>
<Text>I am {data.item} in a SwipeListView</Text>
</View>
</TouchableHighlight>
)}
BAD:
renderItem={ data => (
<View>
<TouchableHighlight onPress={this.doSomething.bind(this)}>
<Text>I am {data.item} in a SwipeListView</Text>
</TouchableHighlight>
</View>
)}
Component APIs
Flatlist / SectionList support
SwipeListView now supports FlatList and SectionList! (as of v1.0.0)
Please see the migrating-to-flatlist doc for all details.And see example.js for a full usage example.
Also see docs/ for help with
And the examples/ folder for examples on
- Swipe to Delete (also see "Actions" for an alternative way to achieve this)
- Per Row Behavior
- UI Based on Swipe Values
- Actions
Core Support
RN Core added a SwipeList component as of v0.27.0It is actively being worked on and has no documentation yet. So I will continue to maintain this component until a future date.
License
MIT
-
<SwipeList renderHiddenRow={ (data, secdId, rowId, rowMap) => { <TouchableOpacity onPress={ _ => rowMap[`${secId}${rowId}`].closeRow() }> <Text>I close the row</Text> </TouchableOpacity> }} />
-
平时使用SwipeRow的时候，大家肯定碰到这种情况：就是当我左滑或者右滑一行时，去关闭掉其他行已经左滑或者右滑的行。但是Swiperow自身没有方法实现此情景，下面就是如何使用Swiperow自定义此功能。 //构造器 constructor(props) { super(props); props.loadMore = false; this
-
react-native-swipe-list-view 侧滑删除组件 包含两个子组件：SwipeListView 和 SwipeRow 一、SwipeListView —-是基于listview封装的具有侧滑打开、关闭功能的listview组件。目前也支持FlatList和SectionList。 import {SwipeListView} from ‘react-native-swipe-l
-
我下载的版本是5.1.1 因为最新的版本 用的时候发现了问题 没有用 npm install react-swipe@5.1.1 --save import React from 'react'; import ReactSwipe from 'react-swipe'; import './style.less'; class Category extends React.Component
-
import React, { PureComponent} from 'react'; import { SafeAreaView, Image, FlatList, Platform, BackHandler, View, Text, TextInput, Alert, ImageBackground
-
转自：http://www.jianshu.com/p/f39f75cf3e38 我的React-Native不得不说的一些事情－5 ListView 作用 ListView在APP的作用可谓是重中之重，除非你不需要要多信息展示，否则的话，一个APP肯定是要用ListView来工作的。而优化它，也是必须的。 简单代码 'use strict' import React from 'react-na
-
初学 React Native，看到 Github 上现有的相关控件实现都较为复杂，又不太符合自己心中想要的样子。于是自己做了一个简单的列表下拉、上拉刷新控件。列表使用的是 FlatList。 控件的实现非常简单，代码一共 100 多行，方便各位根据自己的需求随意修改。如果有 bug 或建议，欢迎提 issue。 截图 下拉刷新 上拉翻页 已加载全部数据 安装 NPM npm install --
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
百度移动统计SDK支持使用react native框架的H5页面统计，封装好的插件已经在github上开源，相关用法具体请参考：https://github.com/BaiduMobileAnalysis/baidumobstat-react-native。
-
The React Native environment has a lot of little quirks, so this documentation is aimed at helping smooth those over. Please feel free to create issues on GitHub for recommendations and additions to t
-
React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Ima
-
Apple Header Gorgeous Header Elegant Header Modern Header Profile Header Classic Header Finally Version 1.0.0 �� Finally, this library got the version 1.0.0. More than 5k downloads and it is separated