iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 6
1
Modern Web

使用 Modern Web 技術來打造 Native App系列 第 6

Day 06:React Native 入門

本篇目的

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

目錄結構

依照上一篇做完 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 安裝時所鎖定的特定版本的描述檔

其他則是 GitBuckWatchman 的設定檔,暫時應該不需要特別提到。

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.registerComponentReactDOM.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>
    );
  }
}

before

這部分只要利用我們曾經學過的 React,不需要太多其他的概念,先把 View 想成是 divText 想成是 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 就能馬上看到結果:

after

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

React Native Playground

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

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

rnplay

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

iosapp

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

結語

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


上一篇
Day 05:準備 React Native 開發環境
下一篇
Day 07:Style & Layout
系列文
使用 Modern Web 技術來打造 Native App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Nick
iT邦新手 5 級 ‧ 2020-04-24 12:42:44

版大你好,我目前用react-native init後,專案裡面沒有index.android.js跟index.ios.js兩隻檔案
只有index.js而已
可以請教一下這是發生什麼原因嗎
我的react-native 是0.62.2

C. T. Lin iT邦新手 5 級 ‧ 2020-06-25 15:03:26 檢舉

因為這篇是 2016 年的文章,init 出來的東西可能已經有不少差異喔

我要留言

立即登入留言