React Navigation处理外部链接，根据指定链接跳转指定页面

前言

日常的react-native开发需求中肯定会有，通过外部链接唤起APP并打开指定页面的需求。

唤起APP的配置方法可以参考另一篇文章，这里只罗列一下js部分的代码

安卓：juejin.cn/post/693240…

依赖包的版本

"react-native": "0.63.2",
"@react-navigation/bottom-tabs": "^5.10.2",
"@react-navigation/material-top-tabs": "^5.3.7",
"@react-navigation/native": "^5.8.2",
"@react-navigation/stack": "^5.11.1",

React Navigation 5.0+版本和低版本的用法好像是不一样的，具体可以查看官方文档

开始使用

1、NavigationContainer接受一个linking参数，可以更容易的处理传入的链接，可以指定的最重要的两个属性

const linking = {
  // 这里是你配置好的APP deep-link/APP-LINK/Universal Links
  prefixes：['https://my.app.com','http://my.app.com','myapp://com.mypp/'],
  // 路径地址匹配
  config: {
  	// 这里将/feed/:sort地址匹配到了底部tab便签栏的Chat路由
    Home: {
      screens: {
        Chat: 'feed/:sort',
      },
    },
    // 这里将/user地址匹配到了Profile路由
    Profile: 'user',
  },
};

// 链接传递的路由参数可以通过this.props.route.params获取到

function App() {
  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function HomeScreen() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Chat" component={ChatScreen} />
    </Tab.Navigator>
  );
}

目前研究的就这些了，后期遇到再继续更新，稍微再复杂一些的功能请移步到官网吧