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);        }    }}