2017-01-19 18 views
1

私のリストビューに行が追加されているとき、私は奇妙な動作をしています。私の論理がどこに間違っているのか分かりません。私は、反応ネイティブタブビューを使用してタブを持っています。私はReact-Native listviewを更新するには?

Before

を表示されているもの、これはあるオブジェクトを追加する前にタブ2に、私は、オブジェクトを追加し、戻った後、タブ4に表示されている「お気に入り」の配列にオブジェクトを追加していタブ4に、これは私が見ていますものです

after

とコード

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

constructor(props) { 
    super(props) 
    this.state = { 
     favoriteDB: props.favorites, 
     renderPlaceholder: true, 
     dataSource: ds.cloneWithRows([]) 
    } 
    } 

componentDidMount() { 
    InteractionManager.runAfterInteractions(() => { 
     this.setState({ 
     dataSource: ds.cloneWithRows(this.state.favoriteDB), 
     renderPlaceholder: false 
     }) 
    }) 
    } 

    componentWillReceiveProps(prevProps) { 
    const {favorites} = this.props 

    if (JSON.stringify(favorites) != JSON.stringify(prevProps.favorites)) { 
     this._updateFavorites() 
    } 
    } 

    _updateFavorites() { 
    const {favorites} = this.props 

    this.setState({ 
     favoriteDB: favorites, 
     dataSource: ds.cloneWithRows(favorites) 
    }) 
    } 

render() { 
    const {dataSource} = this.state 
    const {visibleHeight, visibleWidth} = this.props 

    if (this.state.renderPlaceholder) 
     return <Placeholder/> 

    return (
     <Container theme={theme}> 
     <View style={{ flex:1, height: visibleHeight - 100, width: visibleWidth }}> 
      <Row> 
      <Col> 
       <List> 
       <ListView 
        style={{ height: visibleHeight - 100, width: visibleWidth }} 
        enableEmptySections={TRUE} 
        automaticallyAdjustContentInsets={FALSE} 
        initialListSize={100} 
        pageSize={100} 
        dataSource={dataSource} 
        renderRow={rowData => this._renderRow(rowData)}/> 
       </List> 
      </Col> 
      </Row> 
     </View> 
     </Container> 
    ) 
    } 
+0

を参照してくださいあなた 'はconsole.log(お気に入り)'場合、あなたは項目の配列全体または追加したものを取得していますか? –

+0

全体の配列 – texas697

+0

@MattAft「ベイカー、マルレンヌJ」の上の疑わしい空間、それは何ですか? –

答えて

0

私はトンを経験しましたcloneWithRowsの入力に行を追加および削除してListViewとし、データ配列を新しいSectionListとします。

私の回避策は、DataSourceが変更されたときに変更されるListViewのキーを追加することです(名前とサイズが機能します)。

return (
    <SectionList 
     key={"mylistview_" + this.props.maps.length} 
     style= 
    ... 

_updateFavoritesでhttps://stackoverflow.com/a/31481960/7223

関連する問題