react-native之ScrollView

最新推荐文章于 2021-05-13 09:32:34 发布

別說你還沒有盡力

最新推荐文章于 2021-05-13 09:32:34 发布

阅读量519

点赞数

本文链接：https://blog.csdn.net/u013147860/article/details/65972786

版权

效果图：

1、放置在ScollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。ScrollView适合用来显示数量不多的滚动元素。

2、把组件嵌套在ScrollView里面即可。

'use strict';
import React,{Component} from 'react';
import {AppRegistry,ScrollView,Text,Image} from 'react-native';
class IScrolledDownAndWhatHappenedNextShockedMe  extends Component{

    render(){
        return(
            <ScrollView>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
            </ScrollView>
        );
    }
}
//MyFirstProject 必须初始化的项目名字
AppRegistry.registerComponent('MyFirstProject',() => IScrolledDownAndWhatHappenedNextShockedMe );

如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的ListView组件