如何使用ListView.DataSource？

Question

Just wondering how to read this script from the RN ListView Documentation :

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

What am I exactly passing into ListView.DataSource()? I suppose it is an object with rowHasChanged declared as a function? Therefore, when the function is eventually called by whatever is holding it, it's parent knows to look for rowHasChanged, and use it just as how it is declared?

So essentially, it's "just a requirement" that we have to define an object containing rowHasChanged when using ListView.DataSource?

Or am I interpreting this incorrectly.

Thanks!

Answer 1

rowHasChanged is just a property to a callback to differ between two items in your data array. At the end you only have to pass an array with values (or objects) to the ListView encapsulated within "cloneWithRows"-Method of the DataSource-Object.

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

class ListViewBasics extends Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      items: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={this.state.items}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

// App registration and rendering
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);