ReactJS listView 到 React Native ListvIew [英] ReactJS listView to React Native ListvIew

问题描述

我的目标是将 react listView 转换为可工作的 react-native ListView.第一个代码是 reactJs 代码，第二个是我的 react-native 尝试.主要问题是我需要替换 data.map.这将允许我获取 url.参考

编辑

我没有收到错误，但 ListView 字段为空.

class App 扩展组件 {componentWillMount() {this.props.dispatch({type: 'BLAH'});}使成为(){返回 (<div>{this.props.exception &&<span>异常:{this.props.exception}</span>}数据:{this.props.data.map(e=><div key={e.id}>{e.url}</div>)}

);}}导出默认连接(状态 =>({数据:状态.数据，异常:状态.异常}))(应用程序);

反应原生列表视图:

class App 扩展组件 {构造函数(道具){极好的();const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});this.state = {数据源:ds.cloneWithRows(props.data)};控制台.日志(道具.数据)}componentWillMount() {this.props.dispatch({type: 'BLAH'});}渲染行(行数据){返回 (<查看><Text>{rowData.url}</Text></查看>);}使成为(){返回 (<查看><ListView dataSource={this.state.dataSource} renderRow={this.renderRow}/></查看>);}}导出默认连接(状态 =>({数据:状态.数据}))(应用程序);

解决方案

添加componentWillReceiveProps解决问题:

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

My target is to convert react listView to working react-native ListView. First code is working reactJs code, second is my react-native try. Main issue is that I need replacement for data.map. This will allow me to get url. reference

EDIT

I don't get an error but ListView fields are empty.

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);

to react-native Listview:

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);

解决方案

Adding componentWillReceiveProps solve the problem:

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

这篇关于ReactJS listView 到 React Native ListvIew的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！