react-native 调用android原生函数

调用原生函数在官方网站上有介绍，只不过并不好用。
首先要在原生项目的基础上集成react-native项目，集成过程移步原生集成react-native
1.在android项目中创建如下文件以及函数，要继承ReactContextBaseJavaModule这个类。这里的getName函数返回的字符串就是react-native中的要引入的名字。而其他用@ReactMethod注解，名如其名就是react要调用的方法

public class TestLink extends ReactContextBaseJavaModule {

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

    @ReactMethod
    public void getResult(int a, int b, Promise promise) {
        int c = a + b;
        promise.resolve(c);
    }

    @ReactMethod
    public void toastAndroid() {
        Toast.makeText(getReactApplicationContext(),"Toast",Toast.LENGTH_SHORT).show();
    }

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

2.注册这个模块
在createNativeModules函数中创建了我刚才写的类添加到集合中

public class AndroidPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> list = new ArrayList<>();
        //添加到NativeModules
        TestLink testLink = new TestLink(reactContext);
        list.add(testLink);
        return list;

    }

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

3.~~按照官方文档需要在Application.java中的getPackages中添加。。。反正我按照这个做了很多次没有成功~~ 会报null is …~
因为是android集成react-native的项目，所以肯定在一个页面有ReactRootView对象的创建，我只拿出activity中的onCreate函数，其实单独实现这个只添加了一行代码。

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

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .addPackage(new AndroidPackage())			//这里这里添加刚才注册的模块
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // 注意这里的MyReactNativeApp必须对应“index.js”中的
        // “AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

4.接下来就是react-native代码的事了。以及函数的调用，引入NativeModules，在.TestLink。刚才说了这个“TestLink”就是getName()返回的字符串名字。

import {NativeModules} from 'react-native';
export default NativeModules.TestLink;

在之后就可以引入这个文件直接调用函数了。TestLink.toastAndroid（），就是这样了

<TouchableOpacity
                    onPress={() =>
                        TestLink.toastAndroid()
                    }>
                    <Text>789789</Text>

                </TouchableOpacity>

这篇主要是因为官方文档实现不了，或者没理解其真意。所以做此纪录。

react-native 调用android原生函数

猜你喜欢