Question

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

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不是控制台日志中的对象（评估＆＃39; _this.props.navigation.state.params.user＆＃39;）。我可以知道如何获取参数？谢谢

Answer 1

您可以在react-native stack导航器的reset操作中传递params，如下所示： -

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

Answer 2

这在React Navigation 5上对我有用：

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

import pandas as pd


df1 = pd.DataFrame({'City':["Tucson","Tucson","Portland","San Diego"], 
                    "Event":[1,5,3,2], 
                     "date":[1,2,3,4]})
df2 = pd.DataFrame({"City":["San Diego", "Tucson", "Portland"], 
                    "zip":[1,2,3], "state":["CA", "AZ", "OR"], 
                    "country":["USA","USA","USA"]})
pd.merge(df1,df2, how="left", on="City")

要在新路线“ OrderDetails”中检索参数orderCode：

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

Answer 3

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

第1步：通过参数

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

第2步：获取参数

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

Answer 4

这对我有用：

传递参数：

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

获取它们：

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

Answer 5

是的。 React Navigation 5+让我们轻松使用导航道具重置路线历史记录，然后使我们可以将params属性传递到目标路线对象中。

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

React Navigation Reset可以添加参数吗？

5 个答案: