如何将嵌套JSON添加到我的DataSource ... React Native

时间:2017-06-12 04:40:01

标签: android json reactjs react-native

帮帮我。如何将嵌套JSON添加到我的DataSource ... React Native 为什么这么难,或者我是新手,我不能这样做。

   {
    success: true,
    result: 
    {
        types: [],
        information: {
                        Campaigns: {
                        isEntity: true,
                        label: "Campaigns",
                        singular: "Campaign"
                        },

                        Vendors: {
                        isEntity: true,
                        label: "Vendors",
                        singular: "Vendor"
                        },

                        ProductTaxes: {
                        isEntity: false,
                        label: "ProductTaxes",
                        singular: "ProductTaxes"
                    }
                }
    }
}

我可以在Java(Native Android)中完美地做到这一点 使用Iterator而hasNext

但在React Native中我不能这样做:(

我需要在Listview中显示标签 和条件是isEntity =“true” IsEntity =“false”是否在Listview中显示

import React, { Component } from 'react';
import {
  Text,
  View,
  ScrollView,
  ActivityIndicator,
  ListView
} from 'react-native';
import { List, ListItem } from 'react-native-elements';
import { users } from '../config/data';

class Feed extends Component {

  constructor(props){
    super(props)
    this.state = {
        mSessionName:null,
        isLoading: true,
    };

  }


  onLearnMore = (user) => {
    this.props.navigation.navigate('Details', { ...user });
  };

  componentWillMount() {
    const {state} = this.props.navigation;
    console.log(state.params.sessionName);
    console.log(state.params.u_url);
    console.log(state.params.u_url+"/webservice.php?operation=listtypes&sessionName="+state.params.sessionName);
    return fetch(state.params.u_url+"/webservice.php?operation=listtypes&sessionName="+state.params.sessionName)
    .then((response) => response.json())
    .then((responseJson) => {
      let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.setState({
        isLoading: false,
        dataSource: ds.cloneWithRows(responseJson.result),
      }, function() {
        // do something with new state
      });
    })
    .catch((error) => {
      console.error(error);
    });

  }
  render() {

    if (this.state.isLoading) {
         return (
           <View style={{flex: 1, paddingTop: 20}}>
             <ActivityIndicator />
           </View>
         );
       }

       return (
         <View style={{flex: 1, paddingTop: 20}}>
           <ListView
             dataSource={this.state.dataSource}
             renderRow={(rowData) => <Text>{rowData.information.Campaigns}, {rowData.information.Campaigns}</Text>}
           />
         </View>
       );
  }
}

export default Feed;

输出:&gt;&gt; My output img

1 个答案:

答案 0 :(得分:0)

您可以向renderRow添加条件:

renderRow={(rowData) => <Text>{rowData.information.Campaigns}, {rowData.information.Campaigns}</Text>} // not sure why repeating 

但根据你的评论,它应该是:

renderRow={(rowData) => <Text>{rowData.information.Campaigns.isEntity ? rowData.information.Campaigns.label : </view> }</Text>}

如果需要显示更多数据,那么我建议您使用函数来渲染行并添加您的视图结构以便显示数据。