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-> carros

Motos-> carros ???

Motos-> motos

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

Answer 2

为了将carros对象获取到Listagem屏幕中，您需要将其作为道具传递。

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

React-Native中具有ListView的数组JSON

3 个答案: