react-native - 如何在从第一个屏幕传递到第二个屏幕的第二个屏幕中显示数据

Question

我正在按下按钮将数据从一个屏幕传递到另一个屏幕。我在另一个屏幕上显示数据时遇到问题...

以下是我的代码：

主页.js

  goPressed(shareproductid){    
     this.props.navigation.navigate(
      'Products',
      shareproductid,
      console.log(shareproductid)
    );
  }


  <TouchableHighlight onPress={() => this.goPressed(item.p1.shareproductid)} style={styles.button}>
    <Text style={styles.buttonText}>
      Go
    </Text>
  </TouchableHighlight>

Products.js

import React, { Component } from "react";
  import { View, Text } from "react-native";

  export default class Products extends Component {
    static navigationOptions = {
      title: "Products",
    };

    render() {
      return (
              const { params } = this.props.navigation.state;

        <View>
          <Text>{this.params.shareproductid}</Text>

        </View>
      );
    }
  }

在这个 Products.js 我必须显示shareproductid所以我该如何显示它请帮助...

Answer 1

传递的参数需要是一个对象：

goPressed(shareproductid) {
  const { navigate } = this.props.navigation;
  const params = { shareproductid };

  navigate('Products', params);
}

并像这样在Products.js中捕获它们：

render() {
  const { params } = this.props.navigation.state;

  return (
    <View>
      <Text>{ params.shareproductid }</Text>
    </View>
  );
}