React Navigation Reset 可以加参数吗？答案

【问题标题】：React Navigation Reset Can add parameters?React Navigation Reset 可以加参数吗？
【发布时间】：2023-03-05 16:19:01
【问题描述】：

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

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') 在控制台日志中。我可以知道我应该如何获取参数吗？谢谢

【问题讨论】：

标签： react-native react-navigation

【解决方案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) }

【讨论】：