009_ReactNative: ScrollView

(问渠那得清如许,为有源头活水来。 双手奉上RN官网)

ScrollView : 滚动视图. 它内部的子元素不论当前有没有显示都会被渲染.如果想只渲染当前显示的,使用listview替代


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

class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return(
        <ScrollView> {/*图片与文字混排*/}
          <Text style={{fontSize:96}}>Scroll me plz</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>If you like</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>Scrolling down</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>What's the best</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>Framework around?</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:80}}>React Native</Text>
        </ScrollView>
    );
  }
}


AppRegistry.registerComponent(
  'IScrolledDownAndWhatHappenedNextShockedMe',
  () => IScrolledDownAndWhatHappenedNextShockedMe);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,270评论 25 709
  • (问渠那得清如许,为有源头活水来。 双手奉上RN官网) ListView : 用于垂直滚动显示一些可变的但是结构简...
    莫_名阅读 1,612评论 0 0
  • 动词的意志形+と思います与と思います的区别如下 意志形是指有做某事的准备或意向,已经临近行动阶段了,たい单纯只是想...
    萌囧囧阅读 5,412评论 2 0
  • 如何在家庭教育中有效惩罚孩子,很多父母都很头痛,下面几个方法可以参考执行噢。 01:规劝 案例:与同伴吵架、抢夺玩...
    创客瑞雪阅读 2,600评论 0 0
  • 网易云音乐20170322: 酷玩,梦龙,共和,我的必听乐队木有之三 1、here with me——dido(爱...
    观沧海222阅读 5,581评论 0 3