react-native-swipe-list-view 是一个具有侧滑功能的react-native的listview组件
此组件由两个子组件组成:
<SwipeListView>
是基于listview封装的具有侧滑打开、关闭功能的listview组件,具有一些原生功能行为;例如:当某一行侧滑打开后,在listview滚动或侧滑打开其他行时,会自动关闭此行。
如果你只是想拥有具有侧滑功能的row,那么你可以使用提供的<SwipeRow>
这个组件,它同样具有侧滑功能。
例子:
ios
android
安装
npm install –save react-native-swipe-list-view
或yarn add react-native-swipe-list-view
运行示例
源代码地址
在项目的 ./SwipeListExample
目录下是以上示例运行效果,运行操作如下:
git clone
https://github.com/jemise111/react-native-swipe-list-view.git
cd react-native-swipe-list-view
cd SwipeListExample
npm install
react-native
run-ios | react-native run-android
用法
import { SwipeListView } from 'react-native-swipe-list-view';
render() {
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return (
<SwipeListView
dataSource={ds.cloneWithRows(dataSource)}
renderRow={ data => (
<View style={styles.rowFront}>
<Text>I am {data} in a SwipeListView</Text>
</View>
)}
renderHiddenRow={ data => (
<View style={styles.rowBack}>
<Text>Left</Text>
<Text>Right</Text>
</View>
)}
leftOpenValue={75}
rightOpenValue={-75}
/>
)
}
参考 example.js
去学习全部的使用的方法(包括 <SwipeRow>
的用法)
注意
如果你的row 是可点击的(如:TouchableOpacity, TouchableHightlight等等),建议把此类组件放在最外层;
建议:
renderRow={ data => (
<TouchableHighlight onPress={this.doSomething.bind(this)}>
<View>
<Text>I am {data} in a SwipeListView</Text>
</View>
</TouchableHighlight>
)}
不建议:
renderRow={ data => (
<View>
<TouchableHighlight onPress={this.doSomething.bind(this)}>
<Text>I am {data} in a SwipeListView</Text>
</TouchableHighlight>
</View>
)}
手动关闭rows
在使用的时候如果需要 关闭row,可以使用以下方法调用closeRow()
方法关闭row:
<SwipeList
renderHiddenRow={ (data, secdId, rowId, rowMap) => {
<TouchableOpacity onPress={ _ => rowMap[`${secId}${rowId}`].closeRow() }>
<Text>I close the row</Text>
</TouchableOpacity>
}}
/>
rowMap
是一个object,结构如下:
{
row_hash_1: ref_to_row_1,
row_hash_2: ref_to_row_2
}
每一个row_hash
是一个<section_id><row_id>
结构的字符串
如果你使用的是一个单独的<SwipeRow>
,你一个通过定义ref去调用closeRow()
关闭row
Per row behavior
如果你需要以上的效果,某些row可以侧滑,而某些不可以滑动,可以在renderRow
方法返回<SwipeRow>
,请参阅下面的示例和API文档,了解如何实现自定义<SwipeRow>
。在example.js
中还有一个完整的例子。
以下参数可以作为<SwipeRow>
的属性被调用:
. leftOpenValue
. rightOpenValue
. stopLeftSwipe
. stopRightSwipe
. closeOnRowPress
. disableLeftSwipe
. disableRightSwipe
. recalculateHiddenLayout
import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view';
<SwipeListView
dataSource={dataSource.cloneWithRows(data)}
renderRow={ (data, secId, rowId) => (
<SwipeRow
disableRightSwipe={parseInt(rowId) % 2 !== 0}
disableLeftSwipe={parseInt(rowId) % 2 === 0}
leftOpenValue={20 + parseInt(rowId) * 5}
rightOpenValue={-150}
>
<View style={styles.rowBack}>
<Text>Left Hidden</Text>
<Text>Right Hidden</Text>
</View>
<View style={styles.rowFront}>
<Text>Row front | {data}</Text>
</View>
</SwipeRow>
)}
/>
API
SwipeListView(component)
SwipeRow(component)
当使用<SwipeRow>
时,你必须给<SwipeRow>
传递两个元素,第一个将在第二个后面渲染,e.g:
<SwipeRow>
<View style={hiddenRowStyle} />
<View style={visibleRowStyle} />
</SwipeRow>
以上内容是参考github官方文档翻译的(谷歌翻译水准,,,),如有不对之处,请指正,我会及时更新