React Native:JS调用Android本地方法

1.创建原生模块,定义与实现本地方法,供JS调用
(1)自定义一个类,继承ReactContextBaseJavaModule;
(2)重写getName方法,返回模块名称;
(3)在类中定义方法,方法要用@ReactMethod注解,定义普通参数和Callback参数(Callback用于回调JS端).
例:

public class RNBizModule extends ReactContextBaseJavaModule {  //自定义类,继承ReactContextBaseJavaModule
    
    public RNBizModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    
    @Override
    public String getName() {
        return "RNBizModule";    //返回模块名称,供JS调用
    }
    
    @ReactMethod
    public void login(String json, Callback callback) { //定义方法,用@ReactMethod注解,表明供JS调用
        ...
        callback.invoke("json内容");  //异步调用JS端回调方法,返回json内容给JS端
    }
    
}


2.注册自定义模块,以便JS端可以调用
(1)自定义类,继承ReactPackage;
(2)重写createNativeModules方法,将自定义原生模块加入列表并返回.
(3)自定义Application类,实现ReactApplication类的getReactNativeHost方法,加入自定义ReactPackage
例:
自定义ReactPackage类:

public class RNPackage implements ReactPackage {
    
    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }
    
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
    
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new RNBizModule(reactContext)); //此处加入自定义模块
        return modules;
    }
}


自定义Application类:

public class MainApplication extends Application implements ReactApplication {
    
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }
        
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.asList(new MainReactPackage(), new RNPackage());  //此处加入自定义ReactPackage
        }
    };
    
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost; //返回ReactNativeHost实现
    }
}


AndroidManifest.xml类:

<application
        android:name=".MainApplication"   //此处配置为自定义application类
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
    ...
</application>


3.JS端调用本地方法
(1)import { NativeModules } from 'react-native';
(2)NativeModules.模块名称.方法名称('参数内容', (返回参数) => {...});
例:

import { NativeModules } from 'react-native';
export default class Home extends Component {
    login(){
            NativeModules.RNBizModule.login('json',   //调用Android本地RNBizModule模块中的login方法,传入json格式的字符串
                (json) => {        //json为Android回调时传入的参数
                    alert(json);   //处理json格式的字符串
                }
            );
    }
    render(){
           return (
                <View style={styles.container}>
                    <TouchableOpacity onPress={this.login}>  //点击时调用Android端本地方法
                        <Text>调用native方法</Text>
                    </TouchableOpacity>
                </View>
           )
    }
}
//样式
var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
});


猜你喜欢

转载自blog.csdn.net/a526001650a/article/details/75227051