从 react-native-web 应用程序使用参数访问 URL答案

【问题标题】：Accessing URL with params from a react-native-web app从 react-native-web 应用程序使用参数访问 URL
【发布时间】：2019-04-09 11:57:33
【问题描述】：

我正在开发一个 React-Native 应用程序，我已使用 React-Native-Web（托管在 http://myapp.com 上）将它移植到 Web。

我现在想做的是制作自定义 URL，例如 http://myapp.com/some/path/here/with/?params=something，我可以在我的应用程序中访问它，以便在解析后调度适当的导航操作。

我的问题是，我如何访问/some/path/here/maybe/with/?params=something？

使用 webpack 开发服务器，每当我尝试访问 localhost:8080/asdf 时，都会出现错误 Cannot GET /asdf

我正在使用 react-navigation 3.3.2（具有 Web 兼容性 patch 用于手势处理程序）。我已经访问过这个 SO question 但它谈到了从链接到屏幕的紧密耦合映射。

我想要的是相当简单的东西，我只需要我的 react 应用程序中的某个路径，以便我可以以某种方式对其进行操作。

【问题讨论】：

标签： react-native react-native-web

【解决方案1】：

我的用例中的一个例子：在导航中

    export default createApp(
    createSwitchNavigator({
        HomeScreen : {screen: HomeScreen, path: ''},
        Contact : {screen: Contact, path: 'Contact'},
        EmailVerification : {screen : EmailVerification, path: 'confirm_email/:uid'},//<- this is how to access the page on yousite.com/confirmMail/parameterValueWithoutAnyQuestionMark
    },{
        initialRouteName:'HomeScreen',
    })
);

在您的页面文件中：

class EmailVerification extends Component{
    constructor(props)
    {
        super(props);
        this.state = { 
            isProcessDone : false, 
            uid : this.props.navigation.getParam('uid') //<- this uid paramName must be the same as in navigation
        };
    }
}

这就是我在我的应用程序中的做法，我猜它可能会根据您的导航而改变。

【讨论】：