本篇目的

在上一篇完成環境設定並開好專案後，我們來了解一個新專案的目錄架構、進入點，以及我們能怎麼開始修改程式碼來看到變化。

目錄結構

依照上一篇做完 react-native init 之後，我們應該會產生一個符合下方結構的目錄：

__tests__
android/
ios/
.babelrc
.buckconfig
.flowconfig
.gitattributes
.gitignore
.watchmanconfig
index.ios.js
index.android.js
package.json
yarn.lock

• __tests__：放置測試檔案的資料夾
• android：放置 Android 相關檔案的資料夾
• ios：放置 iOS 相關檔案的資料夾
• .babelrc：Babel 的設定檔
• .flowconfig：Flow 的設定檔
• index.android.js：React Native Android 的進入點
• index.ios.js：React Native iOS 的進入點
• package.json：npm 套件的描述檔
• yarn.lock：Yarn 安裝時所鎖定的特定版本的描述檔

其他則是 Git、Buck、Watchman 的設定檔，暫時應該不需要特別提到。

Index

打開 index.ios.js，我們會看到以下的程式碼，其中使用了 react 以及 react-native 來建立一個跟專案同名的 Root Component：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class IronGithub extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

往下看到最下面可以看到這行：

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

AppRegistry.registerComponent 跟 ReactDOM.render 是一樣的概念，用來把 Component 放到 Host Environment 裡面，在這邊也就是指 iOS、Android 的環境裡。

接著我們來看看核心 Component 的部分：

export default class IronGithub extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

這部分只要利用我們曾經學過的 React，不需要太多其他的概念，先把 View 想成是 div，Text 想成是 p ，馬上就能開始修改這個 App！Style 的部分則會在後面的篇章再提及。

export default class IronGithub extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          歡迎來到鐵人賽！
        </Text>
        <Text style={styles.instructions}>
          這是系列第六篇
          React Native 入門
        </Text>
      </View>
    );
  }
}

改完了之後用 Cmd + R 來 Reload 就能馬上看到結果：

至於 Android，index.android.js 跟 index.ios.js 相當的雷同，除了一些文字上的差別幾乎一樣。

React Native Playground

如果你現在還不想要馬上在本地電腦上開始嘗試，你也可以先用 React Native Playground 來試試。

只要編輯後並存檔就可以即時在右方的模擬器中看到結果：

還可以下載 iOS 的 React Native Playground App，這樣就可以在 iPhone 上直接跑剛剛那份程式了！

也可以利用這樣的方式來把程式碼分享給朋友，是不是很方便啊。

結語

在已經熟悉 React 的前提下，這樣的檔案結構以及程式碼應該是相當的親切，所有東西可以由淺入深，很快地進入狀況，我想這就是在 React 的抽象下，它所帶給你「Learn Once, Write Anywhere」的超能力！