ReactNative入门之编写HelloWorld

原创 2017年01月03日 15:50:38

上一篇文章简要的概括了RN的环境搭建,从本篇开始,我会带大家从一个RN小白,一步一步的具备RN开发的能力。按照传统,我们从HelloWorld开始。

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

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

开始先要导入的是相关的类以及用到的组件,我们可以看出RN的组件和相关类主要是在React和React-Native中引入的,react是js的包,react-native是在react又封装了一层。那么这两个包在那里呢?他们在node_moudles文件夹下面。这个文件加就是我们根据package.json下载的所有跟rn开发相关的包。

这里写图片描述

有java开发经验的应该对class和main函数不陌生。在RN中通过
AppRegistry.registerComponent()函数指定了入口,这个方法有两个参数,第一个参数是你在应用中引用的名字,参数二是你指定的入口class,当我们加载RN的界面时,程序就是从这个class开始的。因此这个注册和java中指定main函数是类似的。class中的render方法就是加载这个类之后返回的结果,最后返回的是Text标签,Text是RN中的文本组件。所以程序加载到工程之后就会显示helloworld!那么如何加载我们的RN界面呢?有两种方式。

第一种:

 public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
    }
  };

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

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

在工程的入口application中实现ReactApplication 接口,添加
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 "HelloWorldApp";
    }
}

直接继承ReactActivity,实现getMainComponentName()方法,这里return的name就是AppRegistry.registerComponent()注册时的第一个参数,官网说的名称要一致说的就是这里。这样加载后,RN界面会全部填充到你的屏幕。

第二种:与第一种不同的是,在加载界面的时候,将RN当做一个view添加到布局中。

  mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())             .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())              .setUseDeveloperSupport(BuildConfig.DEBUG)             .setInitialLifecycleState(LifecycleState.RESUMED)
.build();       mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorldApp", null);
        setContentView(mReactRootView);

通过上面的代码,可以看出,在加载RN界面的时候,需要指定application,然后我们可以指定一个bundle,这个bundle是在打包的时候才有的,因为我们并没有打包,所以在调试的时候就要开启package。当在assets文件下没有找到指定的bundle后,就会去找index.android这个js文件,这个文件就是我们的RN入口文件,在index.android里然后会执行注册class的render函数。这个就是helloword的执行流程。运行结果如下:

这里写图片描述

相关文章推荐

ReactNative入门教程第一步 初始化环境 将HelloWorld运行到手机或者模拟器上

新学习一种语言,总会被各种环境配置挡在门外一阵子,那种心酸和纠结我跟你一样有,在这里我将我趟过的ReactNative的一些坑列出来,尽量让大家能够顺利的将HelloWorld运行到真机上,能够见到R...

ReactNative(二)——HelloWorld

前言在之前没想过要写学习笔记的,不过今天想把webstorm的配置分享出来,然后还是想想还是把学习的记录给写下来吧。不过这就尴尬了,之前写的博客就需要重新排列一下顺序了。也不管了,就写吧。不过记录肯定...
  • gz_jero
  • gz_jero
  • 2016年05月25日 23:28
  • 2772

ReactNative: 不一样的 HelloWorld

如果之前你折腾过 ReactNative, 那么跑起来的效果就是几行文字.今天给大家展示一下在官方 start 的例子基础之上展示不一样的效果.下面跟大家分享如何展示 RN 自带的按钮组件. 后面会...

ReactNative-HelloWorld

要理解React Native应用的基本结构,首先需要了解一些基本的React的概念,比如JSX语法、组件、state状态以及props属性。如果你已经了解了React,那么还需要掌握一些React ...

ReactNative之helloWorld

React Native看起来很像React,只不过其基础组件是原生组件而非web组件。要理解React Native应用的基本结构,首先需要了解一些基本的React的概念,比如JSX语法、组件、st...
  • koocui
  • koocui
  • 2017年05月10日 14:50
  • 107

Spring MVC入门之编写HelloWorld

———–作为一个新手的我,励志与大家分享入门经验,共同进步———– 下面开始SpringMVC的实例演示: 第一步:准备jar包 spring-framework网址:http://maven....
  • tao_ssh
  • tao_ssh
  • 2016年07月16日 13:18
  • 116

Android入门之编写HelloWorld.apk

刚刚开始自学Android,总要为第一个程序写点啥以留作纪念,哈哈,废话少说直接演示操作。第一步:开发工具下载 去Android官网下载相关文件,这里演示的是adt-bundle-windows-x...
  • tao_ssh
  • tao_ssh
  • 2016年08月20日 13:30
  • 237

Hibernate入门HelloWorld程序编写

从http://hibernate.org/orm/官网下载hibernate,该文章里面用的是hibernate4.3.11 用eclipse或者myeclipse创建一个project,在src下...

ReactNative入门之props与state

前一篇博客做了一个helloworld的简单例子。今天,继续RN之旅。学会props与state的使用之后,就可以做组件之间的传值和交互了。这对与RN开发来说十分关键。Props: 在java中创建...

ReactNative 开发入门教程

ReactNative入门1.ReactNative是什么?ReactNative是Facebook开源的应用开发框架,允许你使用 JavaScript 开发原生的iOS应用和Android应用。2....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactNative入门之编写HelloWorld
举报原因:
原因补充:

(最多只允许输入30个字)