React Navigation Reset 可以加参数吗？

Posted 2023-04-13

【中文标题】React Navigation Reset 可以加参数吗？

【英文标题】：React Navigation Reset Can add parameters?

【发布时间】：2017-11-10 22:53:55

【问题描述】：

我仍然是反应导航的新手。 我希望在登录成功后重置路线信息。但是有一些参数，比如我希望传递给主页的登录信息。

import  NavigationActions  from 'react-navigation'

const resetAction = NavigationActions.reset(
  index: 0,
  actions: [
        NavigationActions.navigate( routeName: 'Profile',
                params:user:this.state.username)
      ]
  )
    this.props.navigation.dispatch(resetAction)

在个人资料页面中，我想访问参数，所以我使用这个：

constructor(props)
super(props)
this.state =  username: this.props.navigation.state.params.user, 
  

但我收到：undefined is not an object (evaluate '_this.props.navigation.state.params.user') 在控制台日志中。 我可以知道我应该如何获取参数吗？谢谢

【参考方案1】：

您可以像这样在 react-native stack navigator 的重置操作中传递参数：-

const resetAction = NavigationActions.reset(
            index: 0,
            actions: [ 
                NavigationActions.navigate( 
                    routeName: 'ScreenName',      // name of the screen you want to navigate
                    params: 
                        paramsKey: paramsValue   // this second parameter is for sending the params
                     
                )
            ],
);
this.props.navigation.dispatch(resetAction);

并从导航状态参数中获取第二屏中的参数值，如下所示：-

static navigationOptions = (navigation, screenProps) => 
    const params = navigation.state.params || ;   // You can get the params here as navigation.state.params.paramsKey

    console.log("CompareScreen product_id:", params.paramsKey);

【参考方案2】：

是的，它可以。 React Navigation 5+ 让我们轻松使用 navigation 属性重置路由历史，然后它允许我们将 params 属性传递给目标路由对象。

navigation.reset(
    index: 0,
    routes: [name: 'DriveInfosAdded', params: data],
  );

【参考方案3】：

这在 React Navigation 5 上对我有用：

要重置导航状态，请导航到屏幕“OrderDetails”并将参数“orderCode”传递到此屏幕：

navigation.reset(index: 0, routes: [ name: 'OrderDetails', params:  orderCode: 'whatever'  ] )

在新路由'OrderDetails'中检索参数orderCode：

function OrderDetails(theme, route, navigation) 
const  orderCode  = route.params;
...

【参考方案4】：

您正在使用username 作为键来传递参数。 因此，当您检索它时，您的代码应如下所示

第 1 步：传递参数

this.props.navigation.navigate('Your-Screen_name', username: 'Lucy' )

第二步：获取参数

this.state =  
    username: this.props.navigation.state.params.username, 

【讨论】：

您好，我已经按照您所说的进行了编辑，但仍然收到相同的错误消息

你用的是redux结构吗？

您好，我认为不，我遵循的指南来自：reactnavigation.org/docs/navigators/navigation-actions。 Redux 在高级指南中，我对此并不熟悉。

嗨，我已经编辑了代码。但是，我仍然收到此消息：未定义不是控制台日志中的对象（评估 '_this.props.navigation.state.params.username'）

【参考方案5】：

这对我有用：

传递参数：

NavigationActions.navigate( routeName: 'Location', params: username: 'Luchi' ),

获取它们：

const params = this.props.navigation.state.params || ; if (!(params && params.username)) alert('hi '+params.username)