JSPM

react-native-common-keyevent

该组件用于React-Native中获取Android原生层面的键盘响应事件。

• 目前开发者本人的主要使用场景是Android-TV端获取遥控器的按键事件。

• GitHub地址:https://github.com/372623460jh/react-native-common-keyevent.

安装

使用npm

$ npm install react-native-common-keyevent --save

Android端环境配置

1. android/setting.gradle文件增加以下代码

    ...
    include ':react-native-common-keyevent'
    project(':react-native-common-keyevent').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-common-keyevent/android')

2. android/app/build.gradle文件增加以下代码

    ...
    dependencies {
        ...
        compile project(':react-native-common-keyevent')
    }

3. android代码中修改（Application方式或Activity方式二选一）

   • Application方式注册模块

       import import com.jianghe.keyevent.KeyEventPackage;  //--> 导入模块包
       
       public class MainApplication extends Application implements ReactApplication {
           ......
           @Override
           protected List<ReactPackage> getPackages() {
               return Arrays.<ReactPackage>asList(
                   new MainReactPackage(),
                   new KeyEventPackage() //-->增加组件的ReactPackage文件
               );
           }		
           ......	
       }	

   • Activity方式注册模块

       import com.jianghe.keyevent.*;	//--> 导入模块包
     
       public class MyActivity extends Activity implements DefaultHardwareBackBtnHandler {
       
           private ReactRootView mReactRootView;
           private ReactInstanceManager mReactInstanceManager;
       
           @Override
           protected void onCreate(Bundle savedInstanceState) {
               super.onCreate(savedInstanceState);
               mReactRootView = new ReactRootView(this);
               mReactInstanceManager = ReactInstanceManager.builder()
                       .setApplication(getApplication())
                       .setBundleAssetName("index.android.bundle")
                       .setJSMainModuleName("index.android")
                       .addPackage(new MainReactPackage())
                       .addPackage(new KeyEventPackage()) //-->增加组件的ReactPackage文件
                       .setUseDeveloperSupport(true)
                       .setInitialLifecycleState(LifecycleState.RESUMED)
                       .build();
               mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
               setContentView(mReactRootView);
           }
       
       }

4. Activity中增加按键监听并传递给RN的方法

    import android.view.KeyEvent; // -->引入Android键盘事件包
    import com.jianghe.keyevent.KeyEventModule; // -->引入该组件模块包
   
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //利用RN的DeviceEventEmitter对象将按键消息发送给js
        KeyEventModule.getkeyEventModule().onKeyDownEvent(keyCode);
        super.onKeyDown(keyCode, event);
        return true;
    }
   
    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        //利用RN的DeviceEventEmitter对象将按键消息发送给js
        KeyEventModule.getkeyEventModule().onKeyUpEvent(keyCode);
        super.onKeyUp(keyCode, event);
        return true;
    }

React-Native中使用

在任何你想要使用按键监听的地方引入该组件模块

import KeyEvent from 'react-native-common-keyevent';

1. 在组件中申明3个事件响应方法

    keydown: function (keycode) {
        console.log("按下" + keycode);
    },
    keyup: function (keycode) {
        console.log("抬起" + keycode);
    },
    keypress: function (keycode) {
        console.log("点击" + keycode);
    },

2. 在componentDidMount生命周期方法中初始化KeyEvent对象

    this.ke = KeyEvent.initKeyEvent({
        state: true,//当前对象初始化时是否处于激活状态
        onKeyDown: this.keydown,//键盘按下的回调方法
        onKeyUp: this.keyup,//键盘抬起的回调方法
        onKeyPress: this.keypress,//键盘单击的回调方法
    })

注意

RN中的多个页面都会被渲染到一个Activity中，这样存在的问题就是RN中多个页面响应的其实都是1个Activity的键盘事件。 那么会出现以下问题：

1.现在有2个页面A.js , B.js 现在A中的回车事件是 Alert.alert('A'); B中的上事件是 Alert.alert('B');

当前的焦点页在A上，回车打出的是A；现在通过react-navigation跳转到B页面，这时回车依然会弹出A，这不是我们预期的结果。所以在KeyEvent对象初始化的时候传入了一个state属性，这个属性就是用来控制当前KeyEvent对象是否生效的。 上面情况的解决方案：

A现在通过react-navigation跳转到B页面是使用this.ke.updateState(false)来将A页面的激活状态调整为false这样Android原生的按键事件就会分配到激活的组件对象上