如何在 React Native 中将参数传递到下一个屏幕

问题描述

刚开始学习 React Native。目前我正在研究 createDrawerNavigator 。我很困惑如何将参数从一个屏幕传递到另一个屏幕（从 STOCKSCREEN 到 STOCKLIST/VOLUME ANALYSIS）。我指的是 this steps to do drawer navigation 。在步骤的最后，它说明了应用参数，但我不知道将代码放在哪里...

StockScreen.js（主屏幕）

const StockNavigator = createDrawerNavigator({
StockList: {
    screen: StockList,//HOW TO PASS PARAMETER (stock) TO THIS SCREEN?..
},VolumeAnalysis: {
    screen: VolumeAnalysis,//HOW TO PASS PARAMETER (stock) TO THIS SCREEN?..

},},{
    initialRouteName: "StockList"
});


class StockScreen extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isFetched: false,stock: null,//WANT TO PASS THIS AS PARAMETER             
        };    


        //I HAVE ADDED THIS ONE
        this.props.navigation.navigate('VolumeAnalysis',{ stock:'newStock' })
    
    }

componentDidMount() {
  
    let url = [urls.api.st,'3'].join('/') + '?gg=1'

    fetch(url,{
        headers: {
            Accept: 'application/json',credentials: 'same-origin',})
        .then((response) => {
            if (!response.ok) throw Error([response.status,response.statusText].join(' '))

            return response.json()
        })
        .then((body) => {
            this.setState({
                isFetched: true,stock: body.data,// DATA POPULATED
            })
        })
        .catch((error) => alert(error));
}

    render () {

     //DISPLAYING StockScreen DATA 

    
    }


}

VolumeAnalysis.js 接收参数（--这里的参数一直给我 NULL..）

render() {

    const { navigation } = this.props;    

    return  (
        <View style={{ flex: 1,alignItems: 'center',justifyContent: 'center' }}>
            <Text>{navigation.getParam('stock') }</Text>

        </View>
    )        
}

非常感谢您的帮助，谢谢..

解决方法

将数据“存储并传递”到另一个屏幕的代码需要位于打算切换屏幕/路由的地方。

因此，例如 - 在显示加载程序的一个屏幕中加载数据后，您可能希望将数据传递到下一个屏幕，即该文章中的 this.props.navigation.navigate('RouteName',{ /* params go here */ })。

并且您可以在 componentDidMount 中添加它 - 在您提供的代码中，在 .then 中，其中数据被解析为类似 this.props.navigation.navigate('VolumeAnalysis',{ data:body.data }) 的内容，假设此组件是也是屏幕之一。

然后在 VolumeAnalysis 屏幕内 - 您可以检查导航器中的任何数据并将其存储在状态中，如果有，再次使用 componentDidMount 到 - const data = this.props.navigation.getParam('data',{})，就像在文章。

您也可以考虑使用全局存储来使用诸如 redux 之类的库共享公共状态。

:: 更新::

您提到的文章已经过时；上面提到的获取参数的方法适用于 4.x 和更新的版本，即 5.x（此处的文档 - https://reactnavigation.org/docs/route-prop） - 可以在传入的 route 道具中找到参数到“屏幕组件”。示例 here 显示了用法；

,

你可以使用 useContext react hook 来做到这一点。

1. 创建上下文文件

import * as React from 'react';

const stock= {
    _stock: 'Null',}

export const StockContext= React.createContext(stock);

2. 定义屏幕中的上下文：

import { StockContext} from '../Contexts/StockContext'

3. 使用 react hook useContext 获取组件内部的数据：

import React,{ useContext,useState } from 'react';

 const StockContext= useContext(stock)