相信配置好rn環境的朋友，在初始化好第一個項目AwesomeProject后會忍不住嘗試動手改一改、試一試。下面還是遵循古老傳統從hello world開始表演，可以在最初搭建好環境時新建的第一個項目AwesomeProject的基礎上，用下面的代碼覆蓋你的index.ios.js或是index.android.js 文件(在項目的根目錄下)，然后運行看看。
Hello World
import React, { Component } from 'react';
import { AppRegistry, Text, StyleSheet } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text style={styles.hello}>Hello world!</Text>
);
}
}
const styles = StyleSheet.create({
hello: {
fontSize: 20,
margin: 10,
}
});
// 注意，這里用引號括起來的'HelloWorldApp'必須和你init創建的項目名一致
AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);
index.android.js 和 index.ios.js 分別作為Android手機和iOS手機上程序開始的入口。
大體結構
上面的代碼段大致可以分為四個部分：
1.組件導入： 所有用到的組件都需要事先進行導入，包括樣式也需要進行導入
import React, { Component } from 'react';
import { AppRegistry, Text, StyleSheet } from 'react-native';
2.核心代碼：所有邏輯代碼編寫的地方
class HelloWorldApp extends Component {
render() {
return (
<Text style={styles.hello}>Hello world!</Text>
);
}
}
3.組件樣式：render()方法中用到的組件的樣式，可以集中在這里編寫
const styles = StyleSheet.create({
hello: {
fontSize: 20,
margin: 10,
}
});
4.注冊啟動組件：組件只有注冊后才能運行。這里用到的AppRegistry也需要在組件導入區進行導入.
注意，這里用引號括起來的'HelloWorldApp'必須和你init創建的項目名一致。
AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);
組件——Component
上面多次提到一個重要的名詞——組件（Component），在React Native項目中每個界面都是由一個個小組件組成的大組件。在Hello World實例代碼中<Text>Hello world!</Text>，<Text>就是React Native的內置組件，專門用來顯示文本。而形如<Text>Hello world!</Text>的語法叫做JSX——是一種在JavaScript中嵌入XML結構的語法。很多傳統的應用框架會設計自有的模板語法，讓你在結構標記中嵌入代碼。React反其道而行之，設計的JSX語法卻是讓你在代碼中嵌入結構標記。
流程——上面代碼做了些什么事
上面的代碼定義了一個名為HelloWorldApp的新的組件，并且使用了名為AppRegistry的內置模塊進行了“注冊”操作。你在編寫React Native應用時，肯定會寫出很多新的組件。而正如前面所說，一個App的最終界面，其實也就是各式各樣的組件的組合。組件本身結構可以非常簡單——唯一必須的就是在render方法中返回一些用于渲染結構的JSX語句。
AppRegistry模塊則是用來告知React Native哪一個組件被注冊為整個應用的根容器。你無需在此深究，因為一般在整個應用里AppRegistry.registerComponent這個方法只會調用一次。上面的代碼里已經包含了具體的用法，你只需整個復制到index.ios.js或是index.android.js文件中即可運行。
