在 React Native 中实现类似 Android 的自定义 URL Scheme（myapp://open）并跳转到指定页面，可以通过以下步骤完成。React Native 提供了对深度链接（Deep Linking）的支持，可以让你通过 URI 打开应用并导航到特定页面。

以下是详细的配置和使用方法：

1. 配置自定义 URL Scheme

(1) 在 Android 中配置

React Native 应用的 Android 部分需要在 AndroidManifest.xml 文件中注册自定义的 URL Scheme。

打开
android/app/src/main/AndroidManifest.xml，在 <activity> 标签中添加以下内容：

<activity
    android:name=".MainActivity"
    android:launchMode="singleTask">
    <intent-filter>
        <!-- 定义 Action -->
        <action android:name="android.intent.action.VIEW" />

        <!-- 定义 Category -->
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <!-- 定义自定义的 Scheme 和 Host -->
        <data
            android:scheme="myapp"
            android:host="open" />
    </intent-filter>
</activity>

说明：

• android:scheme="myapp"：定义了自定义的 Scheme。
• android:host="open"：定义了自定义的 Host。
• 结合起来，完整的 URI 格式为 myapp://open。

(2) 在 iOS 中配置

对于 iOS，需要在 Info.plist 文件中注册 URL Scheme。

打开
ios/YourProjectName/Info.plist，添加以下内容：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
        <key>CFBundleURLName</key>
        <string>com.yourcompany.myapp</string>
    </dict>
</array>

说明：

• CFBundleURLSchemes：定义了自定义的 Scheme（如 myapp）。
• CFBundleURLName：可以是你的应用的 Bundle ID 或其他唯一标识符。

2. 在 React Native 中处理 Deep Link

React Native 提供了 Linking 模块来处理深度链接。你需要监听传入的 URI，并根据 URI 的内容导航到指定页面。

(1) 监听 Deep Link

在你的主组件（如 App.js）中，使用 Linking 模块监听传入的 URI：

import React, { useEffect } from 'react';
import { Linking, Text, View } from 'react-native';

const App = () => {
  useEffect(() => {
    // 处理启动时的初始 URI
    const handleInitialUrl = async () => {
      const initialUrl = await Linking.getInitialURL();
      if (initialUrl) {
        handleDeepLink(initialUrl);
      }
    };

    handleInitialUrl();

    // 监听后续的 URI 变化
    const linkingSubscription = Linking.addEventListener('url', (event) => {
      handleDeepLink(event.url);
    });

    return () => {
      // 清理事件监听
      linkingSubscription.remove();
    };
  }, []);

  const handleDeepLink = (url) => {
    console.log('Received URL:', url);

    // 解析 URL 并跳转到指定页面
    if (url.startsWith('myapp://open')) {
      // 跳转到指定页面，例如：
      console.log('Navigating to the target page...');
      // 使用你的导航库（如 React Navigation）进行页面跳转
    }
  };

  return (
    <View>
      <Text>React Native Deep Link Example</Text>
    </View>
  );
};

export default App;

说明：

• Linking.getInitialURL()：获取应用启动时的初始 URI。
• Linking.addEventListener('url', callback)：监听后续的 URI 变化。
• handleDeepLink(url)：解析 URI 并执行相应的逻辑。

(2) 使用 React Navigation 进行页面跳转

如果你使用的是 react-navigation，可以在 handleDeepLink 函数中调用导航方法。例如：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const App = () => {
  const [initialRoute, setInitialRoute] = React.useState('Home');

  useEffect(() => {
    const handleInitialUrl = async () => {
      const initialUrl = await Linking.getInitialURL();
      if (initialUrl) {
        handleDeepLink(initialUrl);
      }
    };

    handleInitialUrl();

    const linkingSubscription = Linking.addEventListener('url', (event) => {
      handleDeepLink(event.url);
    });

    return () => linkingSubscription.remove();
  }, []);

  const handleDeepLink = (url) => {
    if (url.startsWith('myapp://open')) {
      // 设置初始路由为目标页面
      setInitialRoute('TargetPage');
    }
  };

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={initialRoute}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="TargetPage" component={TargetPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

3. 测试 Deep Link

(1) 在 Android 上测试

• 使用 ADB 命令模拟点击 URI：
• adb shell am start -W -a android.intent.action.VIEW -d "myapp://open" com.yourcompany.myapp

(2) 在 iOS 上测试

• 使用 Xcode 模拟器运行应用后，在终端执行以下命令：
• xcrun simctl openurl booted "myapp://open"

(3) 在浏览器中测试

• 在手机浏览器中输入 myapp://open，观察是否能唤起应用。

4. 注意事项

(1) 参数传递

你可以在 URI 中传递参数，例如：

• myapp://open?screen=profile&id=123
• 在 handleDeepLink 中解析参数：
• const params = new URLSearchParams(url.split('?')[1]);
  const screen = params.get('screen'); // profile
  const id = params.get('id'); // 123

(2) 安全性

• 验证传入的 URI 是否合法，避免恶意调用。
• 如果涉及敏感操作，建议结合签名验证或 Token 校验。

(3) Universal Links（推荐）

• 对于更安全和可靠的深度链接，建议使用 Universal Links（iOS）和 App Links（Android），它们基于 HTTPS 协议，避免了自定义 Scheme 的潜在冲突问题。

通过以上步骤，你可以成功在 React Native 中配置和使用自定义 URL Scheme，并实现跳转到指定页面的功能。如果有任何疑问或需要进一步的帮助，请随时补充说明！