我应该使用什么方法让每张卡片向右/向左滑动？我的卡片在列表视图中 . 我向右或向左滑动任何卡片它应该消失，下一张堆叠的卡片应该在那个地方出现？在反应中 .
从'react'导入React，;从'react-native'导入{Platform，StyleSheet，Text，View，Image，ListView，TouchableOpacity};从'react-native-vector-icons/Ionicons'导入图标;从'react-navigation'导入{TabNavigator，StackNavigator};从'react-native-easy-grid'导入{Col，Row，Grid};从'native-base'导入{Container，Header，Content，Card，CardItem，Thumbnail，Button，Left，Body，Right}; const instructions = Platform.select（{ios：'Press Cmd+R to reload,\n' 'Cmd+D or shake for dev menu'，android：'Double tap R on your keyboard to reload,\n' 'Shake or press menu button for dev menu'，}）;
export default class Scenes extends Component{
static navigationOptions = {
tabBarLabel: 'Scenes',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./video.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
displayImages(users){
var {navigate} = this.props.navigation;
return(
<View style={styles.container}>
<Content style={{paddingTop: 20, borderWidth: 0, shadowOpacity: 0,
shadowOffset: {
height: 0,
width:0
},
shadowRadius: 0,}}>
<Card style={{borderWidth: 0}} transparent>
<CardItem style={{height: 48,borderWidth:0,}}>
<Left>
<Thumbnail source={{uri: users.avatar_url}} style={{height: 40, width: 40}} />
<Body>
<Text style={styles.uploaderName}>{users.name}</Text>
</Body>
</Left>
<Right>
<Image
source={require('./follow.png')}
style={{height: 23, width: 42}}
/>
</Right>
</CardItem>
<CardItem cardBody>
<Image source={{uri: users.image}} style={{height: 322, width: null, flex: 1}}/>
</CardItem>
<CardItem style={{height: 48,borderWidth:0,}}>
<Left>
<TouchableOpacity onPress = { () => navigate ("profile", {}) }>
<Icon style={{color:'#f00039'}} name={'md-heart'} size={20}/>
</TouchableOpacity>
<Text style={{marginLeft:2}}>46</Text>
<Image
source={require('./sharePost.png')}
style={{height: 20, width: 25, marginLeft: 15}}
/>
</Left>
<Body>
<Button transparent>
</Button>
</Body>
<Right>
</Right>
</CardItem>
</Card>
</Content>
</View>
);
}
render() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var users = [
{
name: 'Amy Farha',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
image: 'https://i.pinimg.com/564x/1c/f3/05/1cf305362aed02ad559f989687b1460e.jpg',
},
{
name: 'Chris Jackson',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
image: 'https://i.pinimg.com/236x/a8/37/8e/a8378eeb01ec788a0068ea6b1b759091.jpg',
},
{
name: 'Amanda Martin',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
},
{
name: 'Amy Farha',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
},
{
name: 'Chris Jackson',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
image: 'https://i.pinimg.com/564x/66/f0/2f/66f02f37eb54ff7f79f4c831212b231f.jpg',
},
{
name: 'Amanda Martin',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
image: 'https://i.pinimg.com/564x/58/0c/78/580c789ded6ceeafdf71b792b0d57ac6.jpg',
},
{
name: 'Amy Farha',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
},
{
name: 'Chris Jackson',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
image: 'https://i.pinimg.com/564x/47/6b/5c/476b5c4c9725ff3cd4bb3e5f61e4d6c3.jpg',
},
{
name: 'Amanda Martin',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
image: 'https://i.pinimg.com/564x/ad/4b/06/ad4b06523eefacc30d09d41a9992029f.jpg',
},
{
name: 'Christy Thomas',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
},
{
name: 'Melissa Jones',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
image: 'https://i.pinimg.com/564x/82/ac/2e/82ac2e1c86692090173666496b9ce1cf.jpg',
},
{
name: 'Amanda Martin',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
},
{
name: 'Christy Thomas',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
},
{
name: 'Melissa Jones',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
image: 'https://i.pinimg.com/564x/ae/b6/ac/aeb6ac2f05644f1464c298bf979630e9.jpg',
},
{
name: 'Christy Thomas',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
image: 'https://i.pinimg.com/564x/57/ac/3e/57ac3e724c61f9b9803d520574e42a1e.jpg',
},
{
name: 'Melissa Jones',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
image: 'https://i.pinimg.com/564x/66/f0/2f/66f02f37eb54ff7f79f4c831212b231f.jpg',
},
];
var cloneUsers = ds.cloneWithRows(users);
return (
<View style={{flex: 1}}>
<ListView
style={styles.listView}
dataSource={cloneUsers}
renderRow={this.displayImages.bind(this)}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
/>
</View>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
container: {
flex: 1,
backgroundColor: '#F5F5F5',
paddingHorizontal : 25,
},
uploaderName:{
fontSize: 16,
color: '#36292a'
}
});
2 回答
在React中，我使用HammerJS来做到这一点 .
ReactNative有一个名为PanResponder的内置库 . 有一些例子 .
要在反应原生中制作像Tinder一样的滑动套牌，您可以使用名为
react-native-swipe-decker的库 . 它's a pretty straightforward library, there'是一堆卡片，有像onSwipedLeftonSwipedRightonSwipedAll这样的动作 . 如果要自定义，可以为每个函数定义函数 . 默认情况下，所有卡内容都需要在一个数组中，无论您滑动哪个方向，都会移动到下一张卡 . 您还可以为其添加无限循环 . 您可以查看项目的GitHub存储库并查看其示例 .