Reactjs 如何在StackNavigator中传递道具 const MainNavigator=StackNavigator({ 主页：{ 屏幕：选项卡 }, 产品系列：{ 屏幕：收集产品， 导航选项：（{navigation}）=>({ 标题：`${navigation.state.params.name.toUpperCase（）}` }), }, 主要产品：{ 屏幕：（道具）=>， }, }); 导出默认类MainNav扩展React.Component{ 构造函数（）{ 超级（）； 此.state={ 签出：{lineItems:{edges:[]} }; } 方法1=（参数）=>{ } render（）{ 返回( ); } }

我正在使用react native构建应用程序。我想将方法1传递给不同的子组件。如何在MainProduct组件中传递method1函数？使用我使用的语法，我只能将导航器道具传递给子组件。

我想您可能需要

屏幕道具，来自：

const SomeStack=StackNavigator({
//配置
});
您需要发送以下道具。你需要发送道具名称作为'屏幕道具'字面上然后只有它是发送。是的，这有点奇怪。我试图更改道具的名称，但没有成功

const SomeStack = StackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as 
  this.props.screenProps */}
/>

const propsForAll={
结帐：/*您的结帐数据*/,，
方法1://**你的方法1*/
}
React Navigation v5接受的答案已过时
屏幕道具不再可用，这导致了几个问题

使用react上下文
在react navigation 5.x中

由于React Navigation 5.x基于组件的API，我们有一个比screenProps更好的选择，它没有这些缺点：React上下文。使用React上下文，可以以性能和类型安全的方式将数据传递给任何子组件，我们不需要学习新的API

如果您不熟悉上下文，以下是如何使用上下文传递道具

例如：

const propsForAll = {
checkout:/*your checkout data */, 
method1: /**Your medhod1*/
}

<View style={{flex: 1}}>
       <MainNavigator screenProps={propsForAll}/>
      </View>

从“React”导入React
//在组件外部创建上下文
//可以导出到您的子组件
常量MyContext=React.createContext（）
导出默认函数MyParentComponent（）{
常量myContext={
我的孩子说：“嗨，我是你父亲。”，
} 
返回(
//除了导航道具外，不要将自己的道具传递给导航员
…堆栈逻辑
)
}
//在此处访问您的上下文值
函数MyChildScreen（）{
const{whatIWhatMyChildToKnow}=React.useContext（MyContext）
return{whatIWantMyChildToKnow}//将显示“嗨，我是你的父亲。”
}
从5.0版起已过时。他们转而对环境做出反应。
const propsForAll = {
checkout:/*your checkout data */, 
method1: /**Your medhod1*/
}

<View style={{flex: 1}}>
       <MainNavigator screenProps={propsForAll}/>
      </View>

import React from 'react'
        
// Create context outside of your component
// which can be export to your child component
const MyContext = React.createContext() 
        
export default function MyParentComponent(){
    const myContext = {
        whatIWhatMyChildToKnow: 'Hi, I am your father.',
    } 
    return (
        <MyContext.Provider value={myContext}>
            // Dont pass your own props to your navigator other than RNavigation props
            <YourStackNavigator>
                ...stack logic
            </YourStackNavigator>
        </MyContext.Provider>
    )
}

// access your context value here
function MyChildScreen(){
    const {whatIWhatMyChildToKnow} = React.useContext(MyContext) 
    return <span>{whatIWantMyChildToKnow}</span> // will display 'Hi, I am your father.'
}