react native实现ScrollView简单案例

1. 最主要就是这两个属性
 horizontal={true}  // 子视图元素水平排列
 showsHorizontalScrollIndicator={true} // 水平方向上出现滚动条

2. 下面就是实现的具体代码

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

export default class NewCourse extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.scrollBox}>
                <ScrollView contentContainerStyle={styles.contentContainer}
                  horizontal={true}
                  showsHorizontalScrollIndicator={true}

>
                    <Image source={require(‘../imgs/bing.jpg‘)} style={styles.bannerImg} />
                    <Image source={require(‘../imgs/dong.jpg‘)} style={styles.bannerImg} />
                    <Image source={require(‘../imgs/lv.jpg‘)}   style={styles.bannerImg} /> 
                    <Image source={require(‘../imgs/bing.jpg‘)} style={styles.bannerImg} />
                    <Image source={require(‘../imgs/dong.jpg‘)} style={styles.bannerImg} />
                    <Image source={require(‘../imgs/lv.jpg‘)}   style={styles.bannerImg} />
                    <Image source={require(‘../imgs/dong.jpg‘)} style={styles.bannerImg} />
                    <Image source={require(‘../imgs/lv.jpg‘)}   style={styles.bannerImg} />  
                </ScrollView>
            </View>
        )
    }
}

let styles = StyleSheet.create({
    scrollBox:{
        height: 206,
        borderWidth: 1,
        borderColor: "gray"
    },
    contentContainer:{
       
    },
    bannerImg:{
        width: 136,
        height: 136
    } 
})