如何在 StackNavigator 中传递道具

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 组件中传递 method1 函数？使用我使用的语法，我只能将导航器道具传递给子组件。

Answer 1

我想你可能想要 screenProps，来自 docs:

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

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

Answer 2

您需要发送以下道具。您需要按字面意思将道具名称发送为 'screenProps' 然后才发送。是的，这有点奇怪。我尝试更改道具的名称，但没有成功。

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

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

Answer 3

接受的答案对于 React Navigation v5 和 v6 已经过时

screenProps 不再可用，这导致了几个问题。

改用 react context

引自 react-navigation 5.x,

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

或者，您可以使用 routeProps

向路由传递参数。 v6 doc

navigation.navigate('RouteName', { /* params go here */ })

如果您是 context

的新手

这里是你如何使用上下文来传递 props。

示例：

  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)
    // will display 'Hi, I am your father.'
    return <span>{whatIWantMyChildToKnow}</span>
  }

如何在 StackNavigator 中传递道具

How to pass props in StackNavigator

reactjs

react-native

react-redux

stack-navigator

接受的答案对于 React Navigation v5 和 v6 已经过时

改用 react context

或者，您可以使用 routeProps

如果您是 context