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的执行流程。运行结果如下:

这里写图片描述

Qt入门(2)——使用Qt编写的Hello world

对于一个qt初学者来说,一步一步来直到作出一个hello world是最基础的入门。 从菜单:应用程序->编程中找到QtCreator 打开QtCreator 文件->新建文件或工程……  ,选择 其...
  • yincheng01
  • yincheng01
  • 2014年09月04日 10:40
  • 3817

dubbo简单入门(helloworld例子)

Dubbo现在支持的有三种方式: 1.multicast; 2.zookeeper; 3.redis 下面的Demo使用的是multicast方式。提供者项目结构: 消...
  • qq_16055765
  • qq_16055765
  • 2016年05月31日 09:56
  • 4076

一步一步实现一个简单的OS(HelloWorld)

先弄个HelloWorld吧,虽然这个网上一大堆,不过不知道的人还是不少,就简单的弄一个吧。。。。。。。 系统启动时,第一步是BIOS自检(这个不管),然后从CMOS中设置的默认引导介质中加载第一个扇...
  • tljqis
  • tljqis
  • 2016年02月29日 11:53
  • 697

Node.js开发入门—HelloWorld再分析

详细分析基于http模块的HelloWorld,介绍代码结构和HTTP协议的相关知识。
  • foruok
  • foruok
  • 2015年08月05日 07:03
  • 7629

(菜鸟尝鲜)教你一步步用android studio创建helloWorld安卓工程

5月16日,在Google  I/O大会上,谷歌推出新的Android开发环境——Android Studio,全新的 Android Studio将为android手机用户解决APP不兼容问题服务。...
  • wjky2014
  • wjky2014
  • 2013年05月18日 10:27
  • 15159

[ReactNative入门到精通]React Native 第一个程序 Hello Word

人生没有对错,只有选择后的坚持,不后悔,走下去,就是对的。 React Native 项目目录解析 上一节我们简单的新建了一个React Native的项目AwsoneProject,我们什么都没有...
  • yzzst
  • yzzst
  • 2015年10月12日 01:35
  • 5141

Spring学习之路——简单入门HelloWorld

Spring简单介绍 Spring是一个提供了解决J2EE问题的一站式框架。 Spring的核心是反转控制,通过配置文件完成业务对象之间的依赖注入,他鼓励一个良好的习惯,就是注入对接口编程而不是对...
  • pilihaotian
  • pilihaotian
  • 2016年09月06日 17:31
  • 6773

SpringBoot入门系列:第一篇 Hello World

出于对作者的尊重和感谢,原文地址为 http://blog.csdn.net/lxhjh/article/details/51711148    跟随SpringBoot的文档(http://...
  • sosfnima
  • sosfnima
  • 2016年07月22日 11:52
  • 3316

ubuntu下编写简单的helloworld程序

前提条件虚拟机上安装了linux,或者电脑上有linux系统。至于虚拟机上安装linux,我的博客中有介绍。虽然本例很简单,但是对于我第一次接触linux下C语言编程,还是蛮开心的。记得第一次学习C语...
  • sinat_27714067
  • sinat_27714067
  • 2016年04月07日 23:53
  • 4068

[ReactNative入门到精通]React Native概述

2015年9月15日,Facebook发布了 React Native for Android,把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台。什么是R...
  • yzzst
  • yzzst
  • 2015年10月11日 01:15
  • 11315
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactNative入门之编写HelloWorld
举报原因:
原因补充:

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