美文网首页
009_ReactNative: ScrollView

009_ReactNative: ScrollView

作者: 莫_名 | 来源:发表于2016-08-21 17:41 被阅读0次

    (问渠那得清如许,为有源头活水来。 双手奉上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);
    
    

    相关文章

      网友评论

          本文标题:009_ReactNative: ScrollView

          本文链接:https://www.haomeiwen.com/subject/mekwsttx.html