React Native 學習指南（一） - 構建第一個應用

Binboy_王興彬發表於2016-11-25
React Native

搭建環境

React Native 包管理器同時用到了 node 和 watchman, 並採用了同為 Facebook 出品的 flow 作為型別檢查庫，因此我們將在 macOS 下使用 Homebrew 進行相關依賴的安裝。

安裝 Homebrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
複製程式碼

安裝 React Native 依賴

$ brew install node
$ brew install watchman
$ brew install flow
複製程式碼

== 如果在安裝過程中遇到問題，可嘗試更新 brew 和相關依賴包 ==

$ brew update
$ brew upgrade
複製程式碼

安裝 React Native

$ npm install -g react-native-cli
複製程式碼

針對不同平臺安裝 Xcode 或 Android Studio 開發環境

建立一個新的應用

使用 React Native 命令列工具建立一個模板工程

$ react-native init HelloReactNative
複製程式碼

React Native 預設工程檔案結構

按專案建立的成功提示執行應用

To run your app on iOS:
   cd /Users/Binboy/Desktop/HelloReactNative
   react-native run-ios
   - or -
   Open /Users/Binboy/Desktop/HelloReactNative/ios/HelloReactNative.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd /Users/Binboy/Desktop/HelloReactNative
   react-native run-android
複製程式碼

React Native 示例

== 若執行出錯，可嘗試在工程目錄下重新執行 npm install 和 npm start ==

配置部署到 iOS 裝置

登入開發者賬號 -> 註冊 iOS 裝置 UUID -> 在 AppDelegate.m 中配置 React Native 檔案地址 jsCodeLocation

探索示例程式碼

摸索一下命令列工具生成的預設工程專案程式碼吧~

新增元件

  • 在 AppDelegate.m 中宣告根檢視 RCTRootView
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 
        moduleName:@"HelloReactNative" 
        initialProperties:nil 
        launchOptions:launchOptions];
複製程式碼
  • 對應地，在 index.ios.js中，程式碼最後一行可以看到其中註冊了一個相同名字的元件
AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);
複製程式碼

模組匯入

  • 進一步觀察 index.ios.js 檔案的開頭
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
複製程式碼

開發過程中，我們需要匯入所需的每一個元件或模組，包括像 AppRegistry 和 StyleSheet 這樣基本的庫函式模組。

檢視樣式元件

  • 元件結構
export default class HelloReactNative 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>
    );
  }
}
複製程式碼

熟悉HTML這樣的結構化標記語言的話，這段程式碼不難理解，表達了檢視中的元件結構

  • 元件樣式
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,
  },
});
複製程式碼

React Native 中所有樣式都採用樣式物件來代替傳統樣式表，通常使用 StyleSheet 庫來建立元件樣式。

總結

大致熟悉了預設示例工程的檔案結構與程式碼組織，那麼接下來我們就將做點兒有趣的嘗試來實現一些簡單的小功能，看看 React Native 是如何工作的。

操練程式碼：Binlogo/HelloReactNative - Github

相關文章