使用 React Native开发,iOS搞完,开始适配安卓,由于木有接触过安卓,所以碰到了很多问题,第一个问题,安卓的返回键BackAndroid问题,
其中的java原生代码如下:
自定义方法的类:RCTCommonTools
我写了一个工具类,来搞定,其中用到了Java原生代码与js交互;好吧,上代码:
- // BackAndroidTool
- // 功能: "安卓手机上的返回键"
- // Created by 小广 on 2016-05-10 下午.
- // Copyright © 2016年 All rights reserved.
- /*
- 使用: 参考链接:http://reactnative.cn/post/480
- 1.在首页/homepage页(只需要在全局都存在的页面调用一次监听即可)
- componentDidMount(){
- // 添加返回键监听
- BackAndroidTool.addBackAndroidListener(this.props.navigator);
- }
- componentWillUnmount(){
- // 移除返回键监听
- BackAndroidTool.removeBackAndroidListener();
- }
- 说明:BackAndroid在iOS平台下是一个空实现,
- 所以理论上不做这个Platform.OS === 'android'判断也是安全的。
- 2. 某些类自定义返回键操作(即点击返回键弹出一个alert之类的操作)
- 在所需类的初始化方法里调用BackAndroidTool.customHandleBack
- 栗子:
- constructor(props) {
- super(props);
- BackAndroidTool.customHandleBack(this.props.navigator,() => {
- Alert.alert('提示','您还未保存记录,确定要返回么?',
- [{text:'取消',onPress:() => {}},
- {text:'确定',onPress:() => { this.props.navigator.pop(); }}
- ]);
- // 一定要 return true; 原因上面的参考链接里有
- return true;
- });
- }
- 3.某些页面需要禁用返回键
- 在nav进行push的时候,设置属性ignoreBack为true 即可
- this.props.navigator.push({
- component: 所需要禁用的类,
- ignoreBack:true,
- });
- */
- 'use strict';
- import React,{
- Platform,
- Navigator,
- BackAndroid,
- ToastAndroid,
- NativeModules,
- } from 'react-native';
- // 类
- var NativeCommonTools = NativeModules.CommonTools;
- export default {
- // 监听返回键事件
- addBackAndroidListener(navigator) {
- if (Platform.OS === 'android') {
- BackAndroid.addEventListener('hardwareBackPress',() => {
- return this.onBackAndroid(navigator);
- });
- }
- },
- // 移除监听
- removeBackAndroidListener() {
- if (Platform.OS === 'android') {
- BackAndroid.removeEventListener('hardwareBackPress', () => {
- });
- }
- },
- // 判断是返回上一页还是退出程序
- onBackAndroid(navigator) {
- if (!navigator) return false;
- const routers = navigator.getCurrentRoutes();
- // 当前页面不为root页面时的处理
- if (routers.length > 1) {
- const top = routers[routers.length - 1];
- if (top.ignoreBack || top.component.ignoreBack) {
- // 路由或组件上决定这个界面忽略back键
- return true;
- }
- const handleBack = top.handleBack || top.component.handleBack;
- if (handleBack) {
- // 路由或组件上决定这个界面自行处理back键
- return handleBack();
- }
- // 默认行为: 退出当前界面。
- navigator.pop();
- return true;
- }
- // 当前页面为root页面时的处理
- if (this.lastBackPressed && (this.lastBackPressed + 2000 >= Date.now())) {
- //最近2秒内按过back键,可以退出应用。
- NativeCommonTools.onBackPressed();
- return true;
- }
- this.lastBackPressed = Date.now();
- ToastAndroid.show('再按一次退出应用',ToastAndroid.SHORT);
- return true;
- },
- // 自定义返回按钮事件
- customHandleBack(navigator, handleBack) {
- if (navigator) {
- let routes = navigator.getCurrentRoutes(); //nav是导航器对象
- let lastRoute = routes[routes.length - 1]; // 当前页面对应的route对象
- lastRoute.handleBack = handleBack;
- }
- },
- }
其中的java原生代码如下:
管理类:RCTCommonToolsPackage (ps:如是不明白,可以去这里 React Native学习:http://reactnative.cn/docs/0.25/native-modules-android.html#content);
- package com.commonTools;
- import com.facebook.react.ReactPackage;
- import com.facebook.react.bridge.JavaScriptModule;
- import com.facebook.react.bridge.NativeModule;
- import com.facebook.react.bridge.ReactApplicationContext;
- import com.facebook.react.uimanager.ViewManager;
- import java.util.Arrays;
- import java.util.Collections;
- import java.util.List;
- public class RCTCommonToolsPackage implements ReactPackage {
- @Override
- public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
- return Arrays.<NativeModule>asList(new RCTCommonTools(reactContext));
- }
- @Override
- public List<Class<? extends JavaScriptModule>> createJSModules() {
- return Collections.emptyList();
- }
- @Override
- public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
- return Collections.emptyList();
- }
- }
自定义方法的类:RCTCommonTools
- package com.commonTools;
- import android.content.Intent;
- import com.facebook.react.bridge.Callback;
- import com.facebook.react.bridge.ReactApplicationContext;
- import com.facebook.react.bridge.ReactContextBaseJavaModule;
- import com.facebook.react.bridge.ReactMethod;
- import com.tcpaydls.BuildConfig;
- public class RCTCommonTools extends ReactContextBaseJavaModule {
- public RCTCommonTools(ReactApplicationContext reactContext) {
- super(reactContext);
- }
- @Override
- public String getName() {
- return "RCTCommonTools";
- }
- /**
- * 此方法是为了解决返回键退出程序后,ToastAndroid不会消失的bug
- */
- @ReactMethod
- public void onBackPressed() {
- Intent setIntent = new Intent(Intent.ACTION_MAIN);
- setIntent.addCategory(Intent.CATEGORY_HOME);
- setIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
- getCurrentActivity().startActivity(setIntent);
- }
- }