ReactJS listViewからネイティブListvIewに反応する

Question

私の目標は、反応するlistViewを反応するネイティブのListViewに変換することです。最初のコードはreactJsコードで動作しています。主な問題は、私がdata.mapを置き換える必要があるということです。これで私はURLを得ることができます。 reference

私はエラーを取得しないが、リストビューフィールドが空のEDIT

。

class App extends Component { 

    componentWillMount() { 
     this.props.dispatch({type: 'BLAH'}); 
    } 


    render(){ 
     return (<div> 
      {this.props.exception && <span>exception: {this.props.exception}</span>} 
      Data: {this.props.data.map(e=><div key={e.id}>{e.url}</div>)} 

      </div>); 
    } 
} 

export default connect(state =>({ 
    data:state.data , exception:state.exception 
}))(App); 

反応し、ネイティブのためのリストビュー：

class App extends Component { 

    constructor(props) { 
     super(); 
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
     this.state = { 
     dataSource: ds.cloneWithRows(props.data) 
     }; 
     console.log(props.data) 
    } 

    componentWillMount() { 
     this.props.dispatch({type: 'BLAH'}); 
    } 

    renderRow(rowData) { 
     return (
     <View> 
      <Text>{rowData.url}</Text> 
     </View> 
    ); 
    } 

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

export default connect(state =>({ 
    data:state.data 
}))(App); 

Answer 1

は、問題を解決：

componentWillReceiveProps(newProps) { 
    this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(newProps.data), 
    }); 
} 

Answer 2

チェックthe ListView docsを。データソースプロパティは、データの配列ではなく、ListViewDataSourceのインスタンスをとります。

ドキュメントは最小限の実装例を示します。componentWillReceivePropsを追加

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

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