2016-05-24 8 views
3

私は反応ネイティブでListViewを使用しています。そして私は機能によってListViewを更新したいので、私はこのようにthis.setStateを使用しました。ListViewでrenderRowを呼び出す方法は?

<Button onPress={()=>this.setState({word:this.state.word})}>Btn</Button> 

押しボタンの後、render()方法の作品が、renderRow方法ではない作品。したがってListViewは機能しません。どうすれば解決できますか?ここで

は私のListViewは、私は私がボタンを押すとリストビューを更新したい

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

と私の_renderRow

_renderRow(param){ 
    return(
     <View>{param.word.includes(this.state.word)&&<Text>{param.word}</Text>}</View> 
    ); 
} 

で、param.wordはthis.state.word

が含まれていることをリストアップ表示さ
+0

郵便番号:

constructor(props) { var ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2}); this.state = { datasource: ds.cloneWithRows(['A', 'B', 'C']) }; } 

をお使いの更新機能は次のようになります – Jickson

答えて

1

renderRowは、ListViewのDataSourceが更新されるとトリガーされます。あなたのボタンはthis.state.wordではなくthis.state.dataSourceを更新する必要があります。

:あなたのコンストラクタでhttps://facebook.github.io/react-native/docs/listview.html

、あなたがDataSourceを初期化する必要があります

constructor() { 
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
    dataSource: ds.cloneWithRows(['row 1', 'row 2']), 
    }; 
} 

その後、あなたはリストビューでデータソースを登録することができます:

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

あなたのデータの変更データソースを更新することができます:

onDataChanged(newData) { 
    var ds = this.state.dataSource.cloneWithRows(newData); 
    this.setState({dataSource: ds}); 
} 

これはあなたのrenderRow機能をトリガーします。

0

ListViewコンポーネントの必須ListViewDataSourceプロパティのcloneWithRows呼び出しを見逃すことはありません。 Documentationは言う:

データソース内のデータを更新するには、(あなたがセクション心配している場合やcloneWithRowsAndSections)cloneWithRowsを使用しています。データソース内のデータは不変なので、直接変更することはできません。クローンメソッドは新しいデータを吸い込み、各行のdiffを計算するので、ListViewはそれを再レンダリングするかどうかを認識します。

あなたは、コンストラクタで初期化されたDataSource場合:uはしようとしているビューを一覧表示する関連

fetchData() { 
    //... fetching logic 
    var items = ['D', 'E', 'F']; 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(items) 
    }); 
} 
関連する問題