reactnative卡片小案例

效果如图  

可实现卡片列表的滚动，引用了ScrollView，下面看下代码

import React, { Component } from 'react';
import {Text, View, StyleSheet, Image} from 'react-native';

export default class Card extends Component {
    render() {
    return (<View style={S.card}>
        <Image source={require('../Image/1.png')} style={S.image}/>
        {/*<View style={S.text}>*/}
        <View style={S.text}>
          <Text numberOfLines={5}>
              根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。如果想同时开发 iOS 和Android 也没问题， 你只需要先选一个平台开始，另一个平台的环境搭建只是稍有不同。如果阅读完本文档后还碰到很多环境搭建的问题，我们建议你还可以再看看由本站提供的环境搭建视频教程
          </Text>
        </View>
        </View>
    );
  }
}

const S=StyleSheet.create({
    image:{
        height:100,
        width:100},
    text:{  flex:1,
    },
    card:{flexDirection: 'row',
          width:'100%',
          overflow:'hidden'
    }
})

import React, { Component } from 'react';
import { ScrollView, View,StyleSheet ,} from 'react-native';
import Card from './src/component/Text'
export default class HelloWorldApp extends Component {
  render() {
    return (
        <View style={S.container}>
            <ScrollView>
                 <Card/>
                 <Card/>
                 <Card/>
                 <Card/>
                 <Card/>
                 <Card/>
            </ScrollView>
        </View>
    );
  }
}

const S=StyleSheet.create({
  container:{
    width:420,
    overflow:'hidden',
    backgroundColor: 'blue',
    marginTop:50,
    marginLeft:50,
    height:340
  },
})