从零学React Native之05混合开发

本篇文章，我们主要讨论如何实现Android平台的混合开发.

RN给Android端发送消息

首先打开Android Studio,Open工程,在React Native项目目录下选择android子目录下的build.gradle文件打开。

React Native已经默认帮我们创建好了两个类MainApplication和MainActivity

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        //之前版本该代码是在MainActivity中
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        //开发者编写的React包管理器的实例需要在getPackages函数中被创建
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    };

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

public class MainActivity extends ReactActivity {

    /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */
    @Override
    protected String getMainComponentName() {
        return "AwesomeProject";
    }
}

除了上面的代码,我们需要打通RN和原生代码,Android侧的接口类需要继承ReactContextBaseJavaModule

public class ExampleRNInterface extends ReactContextBaseJavaModule{
    public ExampleRNInterface(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    // 这个函数的用途是返回原生代码模块的名称
    @Override
    public String getName() {
        return "ExampleRNInterface";
    }
    @ReactMethod   //必须有当前注解,否则不能被RN调用,函数也不能有返回值
    public void handleMessage(String message){// 这是原生代码处理消息
        //输出日志
        Log.i("ExampleRNInterface","在RN接受到了消息:"+message);

    }
}

getName()函数必须实现,这个函数的用途是返回原生代码模块的名称,在RN侧使用这个名称来调用原生代码模块提供的其他函数。
handleMessage 是自定义的函数 需要使用@ReactMethod标识,否则不能在RN中调用,并且函数不能有返回值,因为调用的原生代码是异步执行的。

做完上面的操作，最后还需要注册开发者编写的原生代码模块，首先需要实现一个React包管理类,继承ReactPackage,并且实现createNativeModules方法,实际的注册过程将在createNativeModules函数被调用时发生。
如下,创建了ExampleReactPackage

代码:
/** * 实现React包管理类 * Created by yull on 08/05. */
public class ExampleReactPackage implements ReactPackage {
    //实际注册过程将在createNativeModules函数被调用时发生
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules=new ArrayList<>();
        modules.add(new ExampleRNInterface(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

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

咱们编写的React包管理器的实例需要在MainApplication.java中的ReactNativeHost里面的getPackages()中被创建,如下:

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        //之前版本是在MainActivity中
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        //开发者编写的React包管理器的实例需要在getPackages函数中被创建
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.asList(
                    new MainReactPackage(),new ExampleReactPackage()//创建自己编写的包管理器
            );
        }
    };

在React Native侧,开发者可以调用Android侧的代码了:

import {
    //...
    NativeModules
} from 'react-native';

let ExampleRNInterface=NativeModules.ExampleRNInterface;

class AwesomeProject extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}
                      onPress={this.buttonPressed}>
                    Welcome to React Native!
                </Text>
            </View>
        );
    }
    buttonPressed(){
        NativeModules.ExampleRNInterface.handleMessage('testMessage');
    }
}

const styles = StyleSheet.create({
   //...
});

AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);

点击屏幕上的文字就会在Android Studio中看到日志了

PS: 修改完了Andorid端代码,貌似需要编译一回,才能生效,我直接运行了下Android代码,然后reloadJS就生效了

RN与Android原生端界面的切换

直接在Android端创建新的Activity,然后修改上面的ExampleRNInterface

public class ExampleRNInterface extends ReactContextBaseJavaModule{
    ReactApplicationContext reactContext;
    public ExampleRNInterface(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext=reactContext;//保存上下文
    }

    // 这个函数的用途是返回原生代码模块的名称
    @Override
    public String getName() {
        return "ExampleRNInterface";
    }
    @ReactMethod   //必须有当前注解,"在RN接受到了消息:"+message);
        Intent intent=new Intent(reactContext,Main2Activity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        reactContext.startActivity(intent);
    }
}

运行结果:

Android发送消息给RN

首先Android侧修改ExampleRNInterface

public class ExampleRNInterface extends ReactContextBaseJavaModule{
    ...
    @ReactMethod   //必须有当前注解,函数也不能有返回值
    public void handleMessage(String message){// 这是原生代码处理消息
        sendMessage("I am Android!");
    }
    //发送消息
    public void sendMessage(String message){
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("Android2RN",message);
    }
}

React Native侧

class AwesomeProject extends Component {
    componentWillMount() {
        console.log('componentWillMount');
        //监听消息和Android端保持一致
        DeviceEventEmitter.addListener('Android2RN',this.handleMessage);
    }
    handleMessage(message){
        console.log(message);
    }
    ...
}

运行结果,当点击屏幕文字的时候 控制台就会打印Android侧返回的日志

监听Android onActivityResult事件

开发者也可以选择直接在Android与React Native的接口类中监听启动Activity的结果。如ExampleRNInterface 实现ActivityEventListener

常量

混合开发中,可以实现getContants的成员函数,把Android原生的常量暴漏给RN侧,这种方法对混合开发有一定的用处

@Override
    public Map<String,Object> getConstants() {
        final Map<String,Object> constants=new HashMap<>();
        constants.put("constantName",contantValue);
        return constants;
    }

在RN侧,开发者可以通过nativeModuleName.constantName来访问被导出的常量

更多精彩请关注微信公众账号likeDev,公众账号名称：爱上Android。