在 React Native 中，与现有的应用程序集成通常需要将 React Native 部分嵌入到现有的原生应用中。以下是一些步骤，指导你在已有的原生应用中集成 React Native：

集成 React Native 到现有 Android 应用：

1. 创建 React Native 项目:

   在你的现有 Android 项目的根目录下，运行以下命令创建一个新的 React Native 项目：
   npx react-native init MyReactNativeApp

   这将在当前目录下创建一个名为 MyReactNativeApp 的 React Native 项目。

2. 配置 React Native 模块:

   在你的 Android 项目中，添加 React Native 的 Gradle 依赖。在 android/app/build.gradle 文件中添加以下内容：
   implementation project(':react-native')

   然后，同步你的 Android 项目。

3. 嵌入 React Native 视图:

   在你的现有 Android 项目中，找到要嵌入 React Native 视图的地方，并使用 ReactRootView 将 React Native 视图嵌入到原生布局中。
   import com.facebook.react.ReactInstanceManager;
   import com.facebook.react.ReactRootView;
   import com.facebook.react.common.LifecycleState;
   import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
   import com.facebook.react.shell.MainReactPackage;

   // ...

   ReactInstanceManager mReactInstanceManager;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);

       mReactInstanceManager = ReactInstanceManager.builder()
               .setApplication(getApplication())
               .setCurrentActivity(this)
               .setBundleAssetName("index.android.bundle")
               .setJSMainModulePath("index")
               .addPackage(new MainReactPackage())
               .setUseDeveloperSupport(BuildConfig.DEBUG)
               .setInitialLifecycleState(LifecycleState.RESUMED)
               .build();

       ReactRootView reactRootView = new ReactRootView(this);
       reactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

       setContentView(reactRootView);
   }

   替换 "MyReactNativeApp" 为你的 React Native 项目的名称。

集成 React Native 到现有 iOS 应用：

1. 创建 React Native 项目:

   在你的现有 iOS 项目的根目录下，运行以下命令创建一个新的 React Native 项目：
   npx react-native init MyReactNativeApp

   这将在当前目录下创建一个名为 MyReactNativeApp 的 React Native 项目。

2. 配置 React Native 模块:

   在你的 iOS 项目中，使用 CocoaPods 将 React Native 集成。在 ios/Podfile 文件中添加以下内容：
   pod 'React', :path => '../node_modules/react-native'

   然后运行以下命令安装依赖：
   pod install

3. 嵌入 React Native 视图:

   在你的现有 iOS 项目中，找到要嵌入 React Native 视图的地方，并使用 RCTRootView 将 React Native 视图嵌入到原生布局中。
   #import <React/RCTRootView.h>

   // ...

   NSURL *jsCodeLocation;

   jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                   moduleName:@"MyReactNativeApp"
                                            initialProperties:nil
                                                launchOptions:nil];

   UIViewController *vc = [[UIViewController alloc] init];
   vc.view = rootView;
   [self presentViewController:vc animated:YES completion:nil];

   替换 "MyReactNativeApp" 为你的 React Native 项目的名称。

通过这些步骤，你就能够在现有的 Android 或 iOS 项目中集成 React Native。在实际应用中，你可能还需要处理通信、路由、共享状态等问题，具体取决于你的应用需求。


转载请注明出处：http://www.zyzy.cn/article/detail/9457/React Native