React Native メモ (ListView)

React Nativeでのメモ（ListView)

ListView でハマった点

• ListView の renderRow で表示させるところでメソッドを動かしたい

class MyComponent extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
  }
  
  showTodo(todo){
   ...
  }

  renderList(todo){
    <TouchableHighlight onPress={() => {
      this.showTodo(todo)
    }}>
      <Text>{todo.name}</Text>
    </TouchableHighlight>
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderList}
      />
    );
  }
}

上のコードだと
_this2.showTodo is not a function と表示される.

　　　　　　　　　　　　<ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderList.bind(this)}
      />

renderRow = {this.renderList.bind(this)}と変更することで
エラーが消える