ReactネイティブjsonオブジェクトがListViewに表示されない

Question

RNを初めて使用していて、json配列のデータを含むリストビューを表示しようとしています。単純な配列を使用すると、コードに示されているjson配列エミュレータを実行すると、何も表示されません。リストビューでそれを表示するには、以下の私の例では、JSONを処理するための具体的な方法があります：

class FetchExample extends Component { 

    constructor(props) { 
    super(props); 
    // Initialize the hardcoded test data - to be replaced by JOSN fetch 
    let data = {"Vehicles":[[ 
     {"vehicle_make": "Toyota", 
     "vehicle_model": "Camry", 
     "vehicle_year": "2015", 
     "vehicle_price_range": "$$ (10-30)", 
     "car_id": 1127, 
     "vehicle_color": "Black", 
     "vehicle_car_accidents": "No", 
     "vehicle_no_owners": "1", 
     "car_vehicle_location": "Lot", 
     "vehicle_city_location": "L.A", 
     "vehicle_mileage": 10864, 
     "vehicle_vin": 1234, 
     "vehicle_off_lease": "Yes", 
     "vehicle_state": "CA" 
    }]]}; 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows(data) 
    }; 
    console.log(data); 
    } 
    render() { 
    return (
     <View style={{paddingTop: 22}}> 
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={(rowData) => <Text>{rowData.Vehicles}</Text>} 
     /> 
     </View> 
    ); 
    } 
} 

Answer 1

私はthe docsを参照している場合は、それがどのように見えるあなたのdata配列ではなくオブジェクトでなければなりません。あなたは次のことを試すことができますか？

let data = [ 
    {"vehicle_make": "Toyota", 
    "vehicle_model": "Camry", 
    "vehicle_year": "2015", 
    "vehicle_price_range": "$$ (10-30)", 
    "car_id": 1127, 
    "vehicle_color": "Black", 
    "vehicle_car_accidents": "No", 
    "vehicle_no_owners": "1", 
    "car_vehicle_location": "Lot", 
    "vehicle_city_location": "L.A", 
    "vehicle_mileage": 10864, 
    "vehicle_vin": 1234, 
    "vehicle_off_lease": "Yes", 
    "vehicle_state": "CA" 
}]; 

編集： あなたの代わりに

dataSource: ds.cloneWithRows(data.Vehicles[0]) 

で

dataSource: ds.cloneWithRows(data) 

を置き換えることができますが、私はあなたが同じくらいすることができますようにあなたのデータを平らにお勧めしたいです。

edit 2： レンダリング方法も変更する必要があります。次へrenderRowを変更しよう：

renderRow={(rowData) => <Text>{rowData.vehicle_make}</Text>}