探索React Native新境界：滑动交互卡牌项目推荐

import React from 'react';
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
 
export default class CardSwiper extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.cardContainer}>
          <Image style={styles.cardImage} source={{ uri: 'https://example.com/card-image.jpg' }} />
          <View style={styles.cardContent}>
            <Text style={styles.cardName}>John Doe</Text>
            <Text style={styles.cardDescription}>Card Description</Text>
          </View>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>LIKE</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardContainer: {
    width: 300,
    height: 200,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 5,
    overflow: 'hidden',
  },
  cardImage: {
    width: '100%',
    height: '80%',
    resizeMode: 'cover',
  },
  cardContent: {
    flex: 1,
    padding: 10,
  },
  cardName: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  cardDescription: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
  },
  button: {
    backgroundColor: '#FF5757',
    padding: 10,
    borderRadius: 5,
    alignSelf: 'flex-end',
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

这个代码实例展示了如何在React Native中创建一个简单的卡牌组件，包括图片、文本和一个可点击的按钮。样式使用了Flexbox布局和简单的样式定义，使得卡牌在应用中的展示更加美观。这个实例可以作为React Native开发者学习如何构建交互式用户界面的起点。