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

Question

刚开始学习 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 接收参数（--HERE THE PARAMS KEEP GIVING ME NULL..）

render() {

    const { navigation } = this.props;    

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

        </View>
    )        
}

非常感谢任何帮助，谢谢..

Answer 1

您可以使用 useContext 反应挂钩来执行此操作。

1. 创建上下文文件

import * as React from 'react';

const stock= {
    _stock: 'Null',
 
}

export const StockContext= React.createContext(stock);

1. 在屏幕中定义上下文：

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

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

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

 const StockContext= useContext(stock)

Answer 2

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

因此，例如 - 一旦数据加载到显示加载程序的屏幕中，您可能希望将数据传递到下一个屏幕，即那篇文章中的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 展示了用法；