美文网首页
9,React Native之ListView

9,React Native之ListView

作者: SYOL | 来源:发表于2017-04-29 10:07 被阅读36次

1,ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。
2,ListView更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,ListView并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。
3,ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源,而renderRow则逐个解析数据源中的数据,然后返回一个设定好格式的组件来渲染。
4,rowHasChanged函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据(===符号只比较基本类型数据的值,和引用类型的地址)来判断某行数据是否变化了。

export default class hyuxin extends Component {
// 初始化模拟数据
  constructor(props) {
    super(props);
    //rowHasChanged函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据(===符号只比较基本类型数据的值,和引用类型的地址)来判断某行数据是否变化了。
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
        <View style={{flex: 1, paddingTop: 22}}>
          <ListView
              dataSource={this.state.dataSource}
              renderRow={(rowData) => <Text>{rowData}</Text>}
          />
        </View>
    );
  }

  }

暂时listView就写这样,后续会自己总结写一个小demo
本文参考于http://reactnative.cn/docs/0.42/using-a-listview.html#content

相关文章

网友评论

      本文标题:9,React Native之ListView

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