传递道具 StackNavigator [英] Pass Props StackNavigator

问题描述

我尝试在stacknavigator上传递道具，这里是我的代码

const MainCart = StackNavigator({购物车:{屏幕:购物车屏幕},查看: {屏幕:COScreen}/* 如何在这个区域传递'myprops'?*/});导出默认类 ReactNative_RefreshControl 扩展组件 {构造函数(道具){超级(道具)}使成为() {console.log('ReactNative_RefreshControl this.props.myparam : ' + this.props.myparam);返回 <MainCart myprops = {this.props.myparam}/>;//https://reactnavigation.org/docs/navigators/stack#Navigator-Props}}

如何在 StackNavigator 区域传递myprops"?

谢谢

解决方案

React Navigation <5

如果你想在那个地方传递道具，你必须像这样使用它.

const MainCart = StackNavigator({购物车:{屏幕:道具=><CartScreen {...props} screenProps={other required prop}>},查看: {屏幕:COScreen}

如果您想在导航解决方案时传递道具 Sagar Chavada 很有用

反应导航 - 5

您必须使用React Context(推荐) 或渲染回调 来解决此问题.文档 link

下面的例子展示了如何使用 React Context

在导航器文件的父级中创建上下文

<你的导航器/></AppContext.Provider>

在您的导航器文件中

const YourNavigator = () =>(<AppStack.Navigator><AppScreen.Screen name={"routeName"} 组件={AppContextWrapper}/></AppStack.Navigator>const AppContextWrapper = ({导航，路线}) =>(<AppContext.Consumer>{(其他必需的道具)=>(<YourScreenComponent {...其他必需的道具}/>)}</AppContext.Consumer>);

另一个简单的(不推荐) - 回调方法

{道具=><HomeScreen {...props} extraData={someData}/>}</Stack.Screen>

<块引用>

注意:默认情况下，React Navigation 将优化应用于屏幕组件以防止不必要的渲染.使用渲染回调删除这些优化.所以如果你使用渲染回调，你会需要确保您使用 React.memo 或 React.PureComponent 作为您的屏幕组件以避免性能问题.

i try to pass props on stacknavigator, here my code

const MainCart = StackNavigator({
  Cart: {
    screen: CartScreen
  },
  Checkout: {
    screen: COScreen
  }

  /* how to pass 'myprops' in this area? */

});


export default class ReactNative_RefreshControl extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    console.log('ReactNative_RefreshControl this.props.myparam : ' + this.props.myparam);
    return <MainCart myprops = {
      this.props.myparam
    }
    />;

    //https://reactnavigation.org/docs/navigators/stack#Navigator-Props
  }


}

how to pass 'myprops' on StackNavigator area?

thanks

解决方案

React Navigation < 5

If you want to pass props in that place you have to use it like this.

const MainCart = StackNavigator({
 Cart: {
    screen: props=> <CartScreen {...props} screenProps={other required prop}>
 },
 Checkout: {
    screen: COScreen
 }

If you want to pass props when navigating the solution by Sagar Chavada is useful

React Navigation - 5

You have to either use React Context(recommended) or a render callback to solve this. Documentation link

Below example shows how to do with React Context

In your parent of the navigator file create a context

<AppContext.Provider value={other required prop}>
   <YourNavigator/>
</AppContext.Provider>

In your navigator file

const YourNavigator = () => (
  <AppStack.Navigator>
     <AppScreen.Screen name={"routeName"} component={AppContextWrapper}/>
  </AppStack.Navigator>

const AppContextWrapper = ({ navigation, route }) => (
  <AppContext.Consumer>
    {(other required prop) => (
       <YourScreenComponent {...other required prop}/>
    )}
  </AppContext.Consumer>
);

another easy (not recommended) - Callback method

<Stack.Screen name="Home">
  {props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use React.memo or React.PureComponent for your screen components to avoid performance issues.

这篇关于传递道具 StackNavigator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！