React native和native交互

先来实现一下React Native调用native方法，具体步骤：

1、创建Module类，继承ReactContextBaseJavaModule类，

public class BridgeModule extends ReactContextBaseJavaModule {

    private static String MODULE_NAME = "BridgeModule";

    private ReactApplicationContext mContext;

    public BridgeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.mContext = reactContext;
    }

    @Override
    public String getName() {
        return MODULE_NAME;
    }

接下来定义要被ReactNative 调用的方法：

/**
     * RN调用Native的方法
     * @param phone
     */
    @ReactMethod
    public void rnCallNative(String phone) {

        // 跳转到打电话界面
        Intent intent = new Intent();
        intent.setAction(Intent.ACTION_CALL);
        intent.setData(Uri.parse("tel:" + phone));
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); // 跳转需要添加flag, 否则报错
        if (getCurrentActivity() != null) {
            getCurrentActivity().startActivity(intent);
        }
    }

2、创建Package实现ReactPackage：

/**
 * Created by focus on 2017/10/27.
 */

public class CommonPackage implements ReactPackage{

    public BridgeModule mModule;
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        mModule = new BridgeModule(reactContext);
        modules.add(mModule);
        return modules;
    }

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

3、在Applications中创建Package的实例，并在getPacakges方法中返回：

public class MainApplication extends Application implements ReactApplication {

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

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              mCommPackage
      );
    }

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

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

  /**
   * 获取 reactPackage
   * @return
   */
  public static CommonPackage getReactPackage() {
    return mCommPackage;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

剩下的就是react native那边的代码了：

export default class App extends Component<{}> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome} >
                    title
                </Text>
                <Text style={styles.welcome} onPress={this.skipNativeCall.bind(this)}>
                    跳转到拨号界面
                </Text>

                <Image source={require('./ic_launcher.png')} />
            </View>
        );
    }
  
    /**
     * 调用原生代码
     */
    skipNativeCall() {
        let phone = '18637070949';
        NativeModules.BridgeModule.rnCallNative(phone);
    }

}

别忘了加权限在manifest文件中，index.js文件中

AppRegistry.registerComponent('FirstApp', () => App);

引用组件。

组后贴出整个Module类代码：

public class BridgeModule extends ReactContextBaseJavaModule {

    private static String MODULE_NAME = "BridgeModule";

    private ReactApplicationContext mContext;

    public BridgeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.mContext = reactContext;
    }

    @Override
    public String getName() {
        return MODULE_NAME;
    }
    /**
     * RN调用Native的方法
     * @param phone
     */
    @ReactMethod
    public void rnCallNative(String phone) {

        // 跳转到打电话界面
        Intent intent = new Intent();
        intent.setAction(Intent.ACTION_CALL);
        intent.setData(Uri.parse("tel:" + phone));
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); // 跳转需要添加flag, 否则报错
        if (getCurrentActivity() != null) {
            getCurrentActivity().startActivity(intent);
        }
    }

}