反应本机深度链接路由不起作用

Question

我正在使用动态链接进行深度链接。

const linking = {
  prefixes: [
    www.example.com
  ],
  config: {
    screens: {
    Chat: {
               path: ":id",
               parse: {
                         id: (id) => `${id}`,
                      },
           },
    Profile: 'user',
  },
  },
};

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

www.example.com/user 总是路由到 ChatScreen 屏幕。我想在 ProfileScreen 中路由。如何在链接中处理配置文件？

Answer 1

将您的config设置为

const config = {
  screens: {
    Profile: '/user',
    Chat:'/chat/:id'
  },
};

你的linking应该是

const linking = {
  prefixes: [
    'www.example.com',
  ],
  config,
};

这样做，www.example.com/user 将被路由到 ProfileScreen 组件。 www.example.com/chat/:<some id> 将带您到 ChatScreen，路由参数为 id。

更新：您似乎正试图通过 www.example.com/<some id> 转到 ChatScreen 并且还 www.example.com/user 加载 ProfileScreen .问题是 React 导航将字符串 "user" 视为参数 id 并将您带到 ChatScreen 本身。这就是我在 ChatScreen.

路径中添加“聊天”的原因

如果真的要用www.example.com/<some id>加载ChatScreen，可以用getStateFromPath，自己写逻辑来区分ids和路径名。为此，您的 linking 将是

   const linking = {
          prefixes: [
            'www.example.com',
          ],
          config,
         getStateFromPath: (path, options) => {
            if (path ==='/user') {
             return {routes: [{ name: 'Profile' }],   
       } ;
            } else {
            return {routes: [{ name: 'Chat',params:{id:getIdFromPath(path)} }],   
       } ;
            }
          },
        };

此处checkIfValidPath用于检查url路径是否为实际id或“用户”。 getIdFromPath是从url中提取id。我还没有测试过这个，但这应该可以。

const checkIfValidPath=(path)=>{
return path !=='www.example.com/user';
}
const getIdFromPath =(path)=>{
return path.slice(1, path.length);

}

Answer 2

这对我有用

    const getIdFromPath = (path) => { return path.slice(1, path.length); } 
    const linking = {
      prefixes: [
        www.example.com
      ],
      config: {
        screens: {
           Chat: {
                   path: ":id",
                   parse: {
                             id: (id) => `${id}`,
                          },
               },
          Profile: 'user',
        },
      },
        getStateFromPath: (path, options) => { 
           if (path === '/user') { 
               return { routes: [{ name: 'Profile' }], }; 
           } 
          else { 
               return { routes: [{ name: 'Chat', params: { id: getIdFromPath(path) } }], }; 
          } 
        }
    };
    
    function App() {
      return (
        <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
          <Stack.Screen name="Chat" component={ChatScreen} />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </NavigationContainer>
      );
    }

反应本机深度链接路由不起作用

React native deep linking routing not working

deep-linking

react-native

firebase-dynamic-links