ReactNative入門之編寫HelloWorld

上一篇文章簡要的概括了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的執行流程。運行結果如下：