ReactNative中的原生模块

在RN开发中我们会遇到一些Android中已经写好的一些功能,在RN中,我们也要用,所以RN为我们提供了原生模块。接下来带大家了解一下原型模块的制作过程以及!

首先,我们要知道三个主要的类:

    1.ReactContextBaseJavaModule

    2.ReactPackage

    3.MainApplication

这三个类是我们在安卓中需要用到的一些类。下面我们利用Android中的Toast为例:


第一步:创建一个类去继承ReactContextBaseJavaModule,实现方法getName,作用是返回给RN项目调用的名称。

               构造方法是必须要实现的。还有一个getConstants,这个方法是选择性的实现,它的作用是用来传递一些参数,利用Map集合来传递参数例如:

               @Nullable

                @Override

                public Map getConstants() {

                    Map map =new HashMap<>();

                    map.put(LONG_KEY,Toast.LENGTH_LONG);

                    map.put(SHORT_KEY,Toast.LENGTH_SHORT);

                    return map;

                }

                这个方法中,我将成员变量LONG_KEY和SHORT_KEY作为查找的key,将Toast中的LENGTH_LONG和LENGTH_SHORT作为了值,意思就是在RN中可以通过LONG_KEY中的值来进行调用。


第二步:@ReactMethod这个注解来声明方法,可以在RN项目中被调用,例如:

             @ReactMethod

            public void show(String content , int time){

                Toast.makeText(getReactApplicationContext(), content, time).show();

            }

            content就是在RN项目中传递的需要Toast的数据,而time就是显示的时长


第三步:写一个类去实现ReactPackage这个接口,会重写两个方法createNativeModules和createViewManagers

                createNativeModules:用来在注册导入RN的原生模块

                createViewManagers:用来导入RN原生组件

                我们用到的是第一个方法createNativeModules,非常简单,只需要创建一个List集合将我们刚刚写好的ReactContextBaseJavaModule的子类创建对象添加到集合中即可,在第二个方法最好不要默认返回空,虽然我们用不到,但是RN项目可能会调用到这个方法,为了防止控制针异常的出现,我们创建一个集合返回一个没有内容的集合(注意:是空内容集合不是没有创建过得集合对象),例如:

                public class MyPackage implements ReactPackage {

                    @Override

                    public List createNativeModules(ReactApplicationContext reactContext) {

                        List li =new ArrayList<>();

                        li.add(new MyView(reactContext));

                        return li;

                    }

                @Override

                public List createViewManagers(ReactApplicationContext reactContext) {

                    List li =new ArrayList<>();

                    li.add(new com.helloworld.ViewManager());

                    return li;

                }

            }


第三步:我们直接打开MainApplication这个类,找到getPackages这个方法将我们的MyPackage类注册到里面就可以了,例如:

            @Override

            protected List getPackages() {

                return Arrays.asList(

                    new MainReactPackage(),new MyPackage()

                );

            }

做好以上三步,我们的安卓项目就正式搭建完成了!!!


当然只搭建Android项目是不够的,我们还不会在RN项目中进行引用,那么接下来,带大家学习一下,RN项目如何引用原生模块!

我们只需要在RN导入组件的地方注册NativeModules组件就完成了第一步

第二步是正式引用,直接在需要引用的地方调用,调用方法如下:

        NativeModules.MyToast.show("内容",NativeModules.MyToast.SHORT );

其中NativeModules.MyToast的意思是获取到安卓项目中,继承了ReactContextBaseJavaModule类 的类 的对象,也就是MyView(这是我们写的第一个类)类。

第二个参数NativeModules.MyToast.SHORT的意思是,就不用说了吧,就是用对象调用静态的成员变量,而调用show方法也是这样的道理。

RN中我是这样做示范的:

<Text  style={styles.welcome}

       onPress={() => {

            NativeModules.MyToast.show("Toast的内容", 0);

        }}>

          Welcome to React Native!

        </Text>


这样我们的一个简单的原型模块就完成了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容

  • ​前提是用react-native init 工程名 已经初始化好一个可以正常运行的RN工程(检验标准是在手机上可...
    姑苏风阅读 5,260评论 2 3
  • 去余姚的第四年,我认识了师父。 师父是安徽人,身高1米75左右,体重却有160,微胖,所以给人的感觉特别平易近人。...
    焕灭阅读 787评论 1 2
  • 我见过微笑的果实,漫山遍野。 沉甸甸,一副可爱模样。 我见过娇羞向阳花,满心期望。 却难堪于直望,偷看指缝中的暖阳...
    醇酒菲酌阅读 428评论 0 1
  • 我在车站等你的时候 秋风正压着云朵向城市后面的山里去 一个白衣少年从我身边起身离开 座位下面被遗弃的烟蒂还在燃烧 ...
    马骥北阅读 1,167评论 21 41
  • 忽然想到龙舟。千舟并进的场面虽然在上半年,让人的记忆很深刻。我还凭着依稀的记忆画了龙头。每艘龙舟都会有一个背对前进...
    oulan阅读 148评论 0 0