Pass Props StackNavigator

Question

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

​

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
  }


}

​

如何在StackNavigator区域传递'myprops‘？

谢谢

Answer 1

React导航< 5

如果你想在那个地方通过道具，你必须像这样使用它。

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

如果你想在浏览Sagar Chavada解决方案时通过道具，那么Sagar Chavada是很有用的

React导航- 5

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

下面的示例显示了如何处理React上下文

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

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

在导航器文件中

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>
);

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

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

注意:默认情况下，React导航将优化应用于屏幕组件，以防止不必要的呈现。使用render回调可以删除这些优化。因此，如果使用呈现回调，则需要确保对屏幕组件使用React.memo或React.PureComponent，以避免性能问题。

Answer 2

对于那些正在寻找React导航5的用户

<Stack.Navigator initialRouteName="LoginScreen" headerMode="none">
 <Stack.Screen name="LoginScreen" component={LoginScreen} initialParams={{'key':'value'}} />
 <Stack.Screen name="CodeVerificationScreen" component={CodeVerificationScreen} initialParams={{'key':'value'}} />
</Stack.Navigator>

您可以在login.js中接收初始参数

console.log(this.props.route.params.key)

Answer 3

**React-navigation v3**

在您的click事件中，如下所示：

    onPressed(movie){
        this.props.navigation.navigate(
          'screen',
          {movie: movie}
        });
      }

<TouchableHighlight onPress={() => this.onPressed(movie)}>

在其他屏幕中，您可以这样设置：

export default class NavigateTo extends Component {
  constructor(props){
    super(props);

    this.state = {
        name: this.props.navigation.state.params.movie.title,
        year: this.props.navigation.state.params.movie.year
    }
  }

电影是一个包含标题、年份、发行日期、收入、海报等json对象。

这个是用于旧导航的：

onPressed(movie){
    this.props.navigator.push({
      id:'page2',
      movie: movie
    });
  }

在第二个屏幕中：

this.state = {
        name: this.props.movie.title,
        email: this.props.movie.year
    }

现在您可以看到差异

如果这不起作用，那么试着这样做

<Button title="Second" onPress={() => navigate("MainCart",{},
  {
    type: "Navigate",
    routeName: "Checkout",
    params: {name:"Jo"}
  }
)} />

为嵌套的堆栈导航https://github.com/react-community/react-navigation/issues/143选中此项