传递道具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

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

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

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

Answer 2

对于那些正在寻找 React Navigation 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

在您的点击事件中，请执行以下操作：

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

movie是一个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