Posted at

React Native メモ (ListView)

More than 1 year has passed since last update.


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)}と変更することで

エラーが消える