左右滑動出現(xiàn)按鈕驾讲,類似iOS的cell巫击,
可以自定義滑動出來的component
地址:https://github.com/dancormier/react-native-swipeout
導(dǎo)入
npm install --save react-native-swipeout
使用非常簡單,多的就不說了疮绷,畢竟github上寫的很清楚抠蚣,看看就知道怎么用了概说,貼一下代碼示例
支持左右滑動熬拒,left和right兩個屬性為數(shù)組類型的爷光,支持多個按鈕
數(shù)組里面是一個對象吧(理解為),支持多個屬性澎粟,下面的代碼只是寫了部分的,文字欢瞪、顏色活烙、背景色等
import SwipeView from 'react-native-swipeout'
constructor(props){
super(props);
this.state={
Rightbuttons:[
{
backgroundColor:'red',
color:'white',
text:'Rbutton1',
onPress:()=>{this.aaaa()}
// 自定義component
component: [<View style={{justifyContent: 'center', height: 130}}>
</View>],
},
{
backgroundColor:'blue',
color:'white',
text:'Rbutton2',
onPress:()=>{this.aaaa()}
},
{
backgroundColor:'green',
color:'white',
text:'Rbutton3',
onPress:()=>{this.aaaa()}
},
],
Leftbuttons:[
{
backgroundColor:'red',
color:'white',
text:'Lbutton1',
onPress:()=>{this.aaaa()}
},
{
backgroundColor:'blue',
color:'white',
text:'Lbutton2',
onPress:()=>{this.aaaa()}
},
{
backgroundColor:'green',
color:'white',
text:'Lbutton3',
onPress:()=>{this.aaaa()}
},
]
}
this.aaaa = this.aaaa.bind(this);
}
aaaa(){
console.log('123');
}
render() {
return (
<View style={styles.container}>
<SwipeView right={this.state.Rightbuttons}>
<View style={styles.swipeStyle}>
<Text>swipe me left</Text>
</View>
</SwipeView>
<SwipeView left={this.state.Leftbuttons}>
<View style={styles.swipeStyle}>
<Text style={{right:10,position:'absolute'}}>swipe me right</Text>
</View>
</SwipeView>
</View>
);
}
更多屬性如圖:
1F45CDA6-D757-49FD-BFF4-17266B1D7F7F.png
EC36A7BA-C0E5-41C2-8CA5-80D6F498FFC7.png
swipe.gif
demo:https://github.com/chjwrr/ThirdPartyToolTest
DDBDBB7C-A4EA-4D92-9D72-A3FCB039FF2E.png