React native (6) scrollview listview

1.scrollview 很简单，跟Android的一样，堆内容就是了

        return(
            <ScrollView>
                <Text style={{fontSize:96}}>Scroll me plz</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
                <Text style={{fontSize:96}}>If you like</Text>
            </ScrollView>
        );

1. listview 的使用

ListView组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

ListView更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，ListView并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源，而renderRow则逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染。

下面的例子创建了一个简单的ListView，并预设了一些模拟数据。首先是初始化ListView所需的dataSource，其中的每一项（行）数据之后都在renderRow中被渲染成了Text组件，最后构成整个ListView。

rowHasChanged函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据（===符号只比较基本类型数据的值，和引用类型的地址）来判断某行数据是否变化了。

constructor(props){
      super(props);

      //感觉就像是声明一个类，下面的  dataScource 才是实例
      const ds=new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2});
      this.state= {

      //实例化一个 dataSource ，并且赋值
          dataSource : ds.cloneWithRows([
              'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
          ])
      };

    }

    render(){
        return (
            <View style={{flex:1}}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(rowData) => <Text>{rowData}</Text>}>
                </ListView>

            </View>
        );
    }