react native 适配机顶盒、智能电视 遥控器解决焦点问题

上一篇文章详细讲解了我自己搭建react native 的开发环境，现在就给大家介绍下如何自定义自己的原声view 、实现自己的适配，这里主要是机顶盒遥控器的适配，react native 本身不支持遥控器焦点，我们自己实现支持焦点：

第一步、定义java的包管理

/**

 * Created by thinkpad on 2017/2/22.

 */

public class AnExampleReactPackage implements ReactPackage {

    @Override

    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

        return null;

    }

    @Override

    public List<Class<? extends JavaScriptModule>> createJSModules() {

        return null;

    }

    @Override

    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

        return Arrays.<ViewManager>asList(new ReactViewManager());

    }

}

第二步、定义java的view

public class CircleView extends TextView {

    public CircleView(final Context context) {

        super(context);

        this.setText("asdfdsafd");

        this.setFocusable(true);

        this.setClickable(true);

        this.setOnClickListener(

                new OnClickListener() {

                    @Override

                    public void onClick(View v) {

                        Toast.makeText(context,"hello",Toast.LENGTH_SHORT).show();

                    }

                });

        this.setOnFocusChangeListener(new OnFocusChangeListener() {

            @Override

            public void onFocusChange(View v, boolean hasFocus) {

                v.setBackgroundColor(Color.RED);

            }

        });

        this.setOnClickListener(new OnClickListener() {

            @Override

            public void onClick(View v) {

                v.setBackgroundColor(Color.WHITE);

            }

        });

    }

}

第三步、jsx映射java组件

import { PropTypes } from 'react';

import { requireNativeComponent, View } from 'react-native';

const MCircle = requireNativeComponent('MCircle', {

    propTypes: {

        ...View.propTypes // 包含默认的View的属性

},

});

export default MCircle;

到处这个组件，在别的页面直接引用就可以实现 自定义的这个view