React Native 实现原生模块 实现拨打电话功能

前端之家收集整理的这篇文章主要介绍了React Native 实现原生模块 实现拨打电话功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React Native 实现原生模块 实现拨打电话功能


Android js可用标签 IntentAndroid(0.16+)
IOS 可用 LinkingIOS

参考 API :http://react-native.cn/docs/native-modules-android.html#content

在onCreate 中

mReactInstanceManager = ReactInstanceManager.builder()
            .addPackage(new SpringBoardPackages())

添加模块
我们首先来创建一个原生模块。一个原生模块是一个继承了ReactContextBaseJavaModule的Java类,它可以实现一些JavaScript所需的功能。我们这里的目标是让我们可以在JavaScript里写ToastAndroid.show(‘Awesome’,ToastAndroid.SHORT);,来调起一个Toast通知

private class SpringBoard extends ReactContextBaseJavaModule { Context context; public SpringBoard(ReactApplicationContext reactContext) { super(reactContext); } @ReactMethod public void gotoIMS(String number) { //用intent启动拨打电话 Intent intent = new Intent(Intent.ACTION_CALL,Uri.parse("tel:" + number)); MainActivity.this.startActivity(intent); } @Override public String getName() { return "SpringBoard"; } } 

定义内部类
我们需要在你的应用的Package类的createNativeModules方法添加这个模块。如果一个模块没有被注册,它从JavaScript中也无法访问到。

// 实现跳转功能
    private class SpringBoardPackages implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext context) { List<NativeModule> modules = new ArrayList<>(); modules.add(new SpringBoard(context)); return modules; } @Override public List<Class<? extends JavaScriptModule>> createJSModules() { return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return null; } }

最后在js 中

var {
  //  添加 
NativeModules,} = React;

    //调用模块方法
  var SpringBoard = NativeModules.SpringBoard;
        // 跳转到 IM 模块
        SpringBoard.gotoIMS("13696891101");

Demo 下载地址

猜你在找的React相关文章