React-Native 中帶有 ListView 的數組 JSON

Question

我有一個問題，我正在嘗試在 JSON 中離線制作一個小數據庫，如下所示：

 [ { title: "Carros", carros: [ { nome: "Ferrari" } ] }, { title: "Motos", carros: [ { nome: "Suzuki" } ] } ];

從現在開始，我的主屏幕將類別列為“Carros”和“Motos”，但是當我想輸入像“carros”這樣的子主題時，卻不能。

當前使用的是 ListView

{ list.map((item, i) => (
    <View>
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.navigate("Listagem", {
            itemName: item.title
          })
        }
      >
        <ListItem key={item.title} title={item.title} />
      </TouchableOpacity>
    </View>
  ))
}

如何獲得兒童物品？

Answer 1

卡洛斯 -> 卡洛斯

摩托斯->卡羅斯？？？

摩托 -> 摩托

如果你只有“carros”，就沒有“motos”。 希望你明白我的意思。

Answer 2

為了在 Listagem 屏幕中獲取 carros 對象，您需要將其作為道具傳遞。

<TouchableOpacity
  onPress={() =>
    this.props.navigation.navigate("Listagem", {
      itemName: item.title,
      childItems: item.carros
    })
  }
 >

在Listagem屏幕中，您將獲得這些屬性。

constructor() {
  super();
  const { navigation } = this.props;
  const itemName = navigation.getParam('itemName', 'defaultName');
  const childItems = navigation.getParam('childItems', []);
  const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
  this.state = {
    dataSource: ds.cloneWithRows(childItems),
  };
}

render(){
  return(
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData.nome}</Text>}
    />
  )
}

Answer 3

您可以在主屏幕中執行此操作：

import React, { Component } from 'react';
import {FlatList, ScrollView} from 'react-native';
import { List, ListItem } from 'react-native-elements'; //this is not necessary. You may use it for aesthetic purposes only.


const cars = [
  {
    title: "Carros",
    carros: [
      {
        nome: "Ferrari"
      }
    ]
  },
  {
    title: "Motos",
    carros: [
      {
        nome: "Suzuki"
      }
    ]
  }
];


export default class Home extends Component {
    renderCars() {
        return (
            <List
                containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}
            >
                <FlatList
                    data={cars}
                    keyExtractor={item => item.title}
                    renderItem={({ item }) => (
                        <ListItem
                            titleStyle={yourstyles.title}
                            hideChevron
                            title={item.title}
                            onPress={() => this.props.navigation.navigate(
                               'ChildPage',
                                {
                                    cars: item //pass the entire item as a prop. This way you will have all its subtopics in your child page
                                }
                            )}
                        />
                    )}
                />
            </List>
        )
    }



   render() {
        return (
            <ScrollView>
                {this.renderCars()}
           </ScrollView>
        )
    }
}

例如，在您要列出“carros”子主題的子頁面中。 請記住，您將整個項目作為道具傳遞，以便您可以在子頁面中使用該道具。 所以現在您可以在您的子頁面中執行此操作：

//ChildPage
import React, { Component } from 'react';
import {FlatList, ScrollView, View, Text} from 'react-native';
import { List, ListItem } from 'react-native-elements'; //this is not necessary. You may use it for aesthetic purposes only.

export default class ChildPage extends Component {
    renderSubtopics() {
        const { cars } = this.props.navigation.state.params; // remember the entire item you passed down from Home, we will use it here
        return (
            <List
                containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}
            >
                <FlatList
                    data={cars.carros}
                    keyExtractor={item => item.nome}
                    renderItem={({ item }) => (
                        <ListItem
                            titleStyle={yourstyles.title}
                            hideChevron
                            title={item.nome}
                            onPress={() => //do whatever )}
                        />
                    )}
                />
            </List>
        )
    }



   render() {
        return (
            <ScrollView>
                <View>
                    <Text>
                         {this.props.navigation.state.params.cars.title}
                    <Text>
                </View>
                {this.renderSubtopics()}
           </ScrollView>
        )
    }
}