Question

const MainNavigator = StackNavigator({
  Home: {
    screen: Tabs
  },

  Collection_Products : {
    screen : Collection_Products,
    navigationOptions :  ({ navigation }) => ({

      title : `${navigation.state.params.name.toUpperCase()}`
    }),
  },

  MainProduct : {
    screen : (props) => <MainProduct {...props} />,
  },

});


export default class MainNav extends React.Component {
  constructor() {
    super();
    this.state = {
      checkout: { lineItems: { edges: [] } }
    };

  }

 method1 = (args) => {

}
  render() {

    return (
      <View style={{flex: 1}}>
       <MainNavigator checkout= {this.state.checkout} method1 = {this.method1}/>
      </View>
    );
  }
}

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

Answer 1

截至2020-04-10的React Navigation v5接受的答案已过时

screenProps 不再可用，这导致了一些问题。您可以按照React-Navigation文档的建议使用react 上下文。

在反应导航5.x的docs中，

由于React Navigation 5.x基于组件的API，我们有一个更好的替代screenProps，它没有这些缺点：React Context。使用React Context，可以以高性能和类型安全的方式将数据传递到任何子组件，并且我们无需学习新的API！

如果您是上下文的新手，则可以使用上下文来传递道具。

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.'
}

Answer 2

我认为您可能希望screenProps来自const SomeStack = StackNavigator({ // config }); <SomeStack screenProps={/* this prop will get passed to the screen components as this.props.screenProps */} />：

{{1}}

Answer 3

您需要发送如下道具。你需要将道具名称作为'screenProps'发送，然后才发送。是的，这有点奇怪。我试图改变道具的名称，它没有得到低谷。

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

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

如何在StackNavigator中传递道具

3 个答案: