Question

我有js文件仪表板和广告。我设法让Dashboard在一个json文件（广告客户）中列出信息，但是单击广告商时，我希望它导航到一个单独的页面，该页面将显示第二个json文件（productadverts）中的一些数据（说标题和文本））。我无法正常工作。以下是资讯主页的代码，接下来是广告的代码。然后是json文件

Execute

import * as React from 'react';
import { Text, View, StyleSheet, Image, FlatList, TouchableOpacity } from 'react-native';

import advertisers from '../data/advertisers.json';

export default class Advertisers extends React.Component {
  rendItem = listItem => {
    let item = listItem.item
    return (
      <TouchableOpacity onPress={() => this.advertSelected(item)}>
        <Text>
          {' '}{item.id}{'    '}{item.company}{' '}
        </Text>
      </TouchableOpacity>
    );
  };

  advertSelected = (item)=>{
    this.props.navigation.navigate("Adverts",{advert:item})
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>List of advertisers</Text>
        <FlatList 
          style={styles.list}
          data={advertisers}
          renderItem={this.rendItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { marginTop: 30, marginLeft: 20 },
  title: { fontSize: 20 },
  list: { paddingTop: 20 },
});

advertisers.json

import * as React from 'react';
import { Text, View, StyleSheet, Image, FlatList, TouchableOpacity } from 'react-native';

import adverts from '../data/productadverts.json';

export default class Adverts extends React.Component {
  rendItem = listItem => {
    let item = listItem.item
    let advert = this.props.navigation.getParam("advert")
    let pic = advert.picture
    let title = advert.title;
    let id = advert.id;
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>List of advertisers</Text>
        <FlatList
          style={styles.list}
          data={adverts}
          renderItem={this.rendItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { marginTop: 30, marginLeft: 20 },
  title: { fontSize: 20 },
  list: { paddingTop: 20 },
});

productadverts.json

[
  {
    "company": "Fujifilm",
    "id": 1,
    "address": "St Martins Business Centre, St Martins Way, Bedford MK42 0LF",
    "contactperson": "Carrie Perrett",
    "contactnumber": "01234572000",
    "emailaddress": "carrie@fuji.co.uk",
    "logo": "https://logos-download.com/wp-content/uploads/2016/04/Fujifilm_logo_slogan_value_from_innovation.jpg"
  },
  {
    "company": "Boeing",
    "id": 2,
    "address": "25 Victoria St, Westminster, London SW1H 0EX",
    "contactperson": "Joanne Cumner",
    "contactnumber": "02073401900",
    "emailaddress": "jo@boeing.co.uk",
    "logo": "https://www.govconwire.com/wp-content/uploads/2013/06/boeing-logo.jpg"
  },
  {
    "company": "IBM",
    "id": 3,
    "address": "Birmingham Rd, Warwick CV34 5AH",
    "contactperson": "Allan Elborn",
    "contactnumber": "01926464000",
    "emailaddress": "allan@ibm.co.uk",
    "logo": "https://d15shllkswkct0.cloudfront.net/wp-content/blogs.dir/1/files/2012/08/ibm-logo.jpeg"
  },
  {
    "company": "Fujitsu",
    "id": 4,
    "address": "55 Jays Cl, Basingstoke RG22 4BY",
    "contactperson": "Alex Taylor",
    "contactnumber": "08433545555",
    "emailaddress": "alex@Fujitsu.co.uk",
    "logo": "https://i.pinimg.com/originals/48/dc/fc/48dcfcd5df1834f66d029d7d34fae26d.png"
  }
]

Answer 1

在React Navigation 5中获取参数的新对象是：

this.props.route.params

尝试使用以下方法获取advert参数：

const { advert } = this.props.route.params;

在React Native中显示来自两个JSON文件的数据

1 个答案: