码迷,mamicode.com
首页 > 其他好文 > 详细

react native实现ScrollView简单案例

时间:2019-10-06 11:21:54      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:ext   text   indicator   content   tco   order   出现   ima   extend   


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

具体想了解其它属性,官方文档API: https://reactnative.cn/docs/scrollview/

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}
                    showsHorizontalScrollIndicator={false}
>
                    <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
    } 
})

 

react native实现ScrollView简单案例

标签:ext   text   indicator   content   tco   order   出现   ima   extend   

原文地址:https://www.cnblogs.com/tengyuxin/p/11626629.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!