react native 调用android

React Native 调用 Android

作为一名经验丰富的开发者，你可以教会刚入行的小白如何实现"React Native 调用 Android"。下面是整个实现过程的步骤和每一步需要做的事情。

步骤

详细步骤

步骤 1: 创建一个React Native项目

首先，你需要创建一个React Native项目。你可以使用React Native CLI工具来创建项目，运行以下命令：

npx react-native init AwesomeProject

这个命令会创建一个名为"AwesomeProject"的React Native项目。

步骤 2: 编写Native模块

接下来，你需要编写一个Native模块，用于实现与Android原生代码的交互。在Android项目的MainActivity.java文件所在的目录下，创建一个新的Java文件，例如SampleModule.java。在这个文件中，你可以定义一个类来实现React Native与Android的桥接。

package com.awesomeproject;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class SampleModule extends ReactContextBaseJavaModule {

  public SampleModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "SampleModule";
  }

  @ReactMethod
  public void showToast(String message) {
    // 在这里编写你的原生代码逻辑，例如弹出一个Toast
    Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show();
  }
}

在这个示例中，我们创建了一个SampleModule类，继承自ReactContextBaseJavaModule。我们需要覆盖getName()方法返回一个模块的名称，并使用@ReactMethod注解标记我们想要在JavaScript中调用的方法。

步骤 3: 注册Native模块

接下来，我们需要将我们的Native模块注册到React Native中。在同一目录下的MainApplication.java文件中，找到getPackages()方法，并添加我们的Native模块。

package com.awesomeproject;

import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // 在这里添加我们的Native模块
      packages.add(new SampleModulePackage());
      return packages;
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this); // Remove this line if you don't want Flipper enabled
  }
}

在这个示例中，我们创建了一个SampleModulePackage类，用于注册我们的Native模块。你可以在相同的目录下创建一个新的Java文件，并添加以下代码：

package com.awesomeproject;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class SampleModulePackage implements ReactPackage {

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    // 在这里添加我们的Native模块实例
    modules.add(new SampleModule(reactContext));
    return modules;
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
}

步骤 4: 在JavaScript中调用Native模块

最后，我们可以在JavaScript代码