Как передать содержимое json в ListView react-native?

Question

[Владислав Байрамов]

Привет! Забираю json (код ниже) и вывожу его как список. Когда вывожу в ScrollView - работает. Но нужно вывести в ListView и я не пойму как передать в него параметры.
Json

{
  "items": [
    {
      "id": 1,
      "name": "some1",
      "sort": 1,
      "created_at": 1487066340,
      "updated_at": 1487066340
    },
    {
      "id": 2,
      "name": "some2",
      "sort": 2,
      "created_at": 1487066350,
      "updated_at": 1487066350
    }
  ],
  "_links": {
    "self": {
      "href": "http://....."
    }
  },
  "_meta": {
    "totalCount": 2,
    "pageCount": 1,
    "currentPage": 1,
    "perPage": 10
  }
}

Мой код

class MainCategoryContainer extends Component {

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

        this._next = this._next.bind(this);
        this._onCloseModal   = this._onCloseModal.bind(this);
    }

    componentWillMount() {
        this.props.getList();
        this.props.getListChild();

    };
    renderRow(item) {
        return (
            <View key={items.id}>
                <TouchableHighlight
                    style={[styles.button]}
                    underlayColor={TOUCH_COLOR}
                >
                    <View style={styles.listItem}>
                        <Text style={styles.buttonText}>{items.name}</Text>
                        <EvilIcon style={styles.mainIcon} name='chevron-right' size={48} />
                    </View>
                </TouchableHighlight>
            </View>
        )
    };
    render() {
        const sliderViewProps = {
            ref: "pager",
            initialPage: 0,
            style: styles.sliderContainer,
            indicator: <PagerDotIndicator style={styles.pageIndicator} pageCount={4} dotStyle={styles.indicatorDot}
                                          selectedDotStyle={styles.selectedIndicatorDot}/>
        };

        const {
            getListRequest, getListError, items
        } = this.props;

        if (getListRequest || getListError !== null) {
            return <View style={styles.fullScreen}>
                <ModalWindow isVisible      = {getListRequest || getListError !== null}
                             isLoading      = {getListRequest}
                             isError        = {getListError !== null}
                             errorText      = {getListError}
                             onRequestClose = {this._onCloseModal}
                />
            </View>
        };

        setInterval(() => {this._next()}, 3500);

        const renderList = items.items.map(function (items) {
            return (
                <View key={items.id}>
                    <TouchableHighlight
                        style={[styles.button]}
                        underlayColor={TOUCH_COLOR}
                        >
                        <View style={styles.listItem}>
                            <Text style={styles.buttonText}>{items.name}</Text>
                            <EvilIcon style={styles.mainIcon} name='chevron-right' size={48} />
                        </View>
                    </TouchableHighlight>
                </View>
            )

        });

        return <View>
            <IndicatorViewPager {...sliderViewProps}>
            <View><ImageWrapper
                imageUrl='http://www.sdelka-invest.com/img/hello.jpg'>{null}</ImageWrapper></View>
            <View><ImageWrapper
                imageUrl='https://pokupkamashiny.ru/wp-content/uploads/2016/10/maxresdefault.jpg'>{null}</ImageWrapper></View>
            <View><ImageWrapper
                imageUrl='http://hyundai-club.kiev.ua/wp-content/uploads/2017/01/32000-thumb.jpg'>{null}</ImageWrapper></View>
            <View><ImageWrapper
                imageUrl='https://previews.123rf.com/images/kzenon/kzenon1312/kzenon131200210/24431786-Man-buying-a-car-in-dealership-sitting-in-his-new-auto-they--Stock-Photo.jpg'>{null}</ImageWrapper></View>
        </IndicatorViewPager>
            <View>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={items => this.renderRow(items)}
                    enableEmptySections={true}
                />
            </View>
        </View>

    }

Answer 1

[carroll]

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }) вынести перед классом.

<ListView
  dataSource={ds.cloneWithRows(this.state.dataSource)}
  renderRow={items => this.renderRow(items)}
  enableEmptySections={true}
/>

Comments

[Владислав Байрамов]

Вот такое вот выводит