React Native 系列(一) -- JS入門知識

前言

本系列是基於React Native版本號0.44.3寫的，最初學習React Native的時候，完全沒有接觸過React和JS，本文的目的是為了給那些JS和React小白提供一個快速入門，讓你們能夠在看React Native語法的時候不那么費勁，有過前端開發經驗的可以直接忽略。

准備工作

• 搭建開發環境

  首先搭建React Native開發環境，搭建過程就不描述了。（ps:這里筆者默認各位看官已經搭建好了開發環境）。

• 初始化項目

  在終端執行：

  react-native init Hello --version 0.44.3
  

  init命令默認會創建最新的版本，而從0.45及以上版本開始需要下載boost庫編譯。
  此庫體積龐大，在國內即便翻牆也很難下載成功，導致很多人無法正常運行iOS項目。中文網在
  論壇中提供了這些庫的國內下載鏈接。如果你嫌麻煩，又沒
  有對新版本的需求，那么可以暫時創建0.44.3的版本。
  執行此命令的時候不要翻牆。(我也不知道為什么，一開始打開藍燈，一直失敗，退出藍燈之后，就能安裝成功。)

  執行成功之后，會生成如下文件：

  

• 運行項目

  由於筆者電腦上android的環境沒有配置，所以本系列講述的都是在index.ios.js上修改。(注意：每次修改代碼，不需要重新運行，只需要保存修改，然后使用command + R就能動態刷新)

  運行項目有兩種方式：

  1. 在終端執行 react-native run-ios；
  2. 直接用xcode打開上述文件中的Hello.xcodeproj，然后在xcode運行；

默認創建的index.ios.js如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
// 導入一些必要的模塊
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

// 類，這是默認的載入類，繼承自Component，Component類似於Android和iOS中的View
export default class Hello 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('Hello', () => Hello);

什么是JavaScript

JavaScript(簡稱JS)是一個輕量級的，解釋型的將函數視為一級公民的程序設計語言。它是一種基於原型的多范式動態腳本語言，支持面向對象，命令式編程和函數式編程。

JS的標准是ECMAScript，React Native是基於ECMAScript 6，簡稱ES6。

tips: Java和JS語法很像，但是用處完全不同，而且也是兩個幾乎沒有關系的東西。

關於Java和JS的區分，可見下表：

JavaScript	Java
面向對象。不區分對象類型，通過原型機制繼承， 任何對象的屬性和方法均可被動態添加。	基於類系統。分為類和實例，通過類層級的定義實現繼承。 不能動態增加對象或類的屬性或方法
變量類型不需要提前聲明(動態類型)	變量類型必須提前聲明(靜態類型)
不能直接寫入硬盤	可以直接寫入硬盤

JS的基礎知識

聲明

• var聲明變量，可以在聲明的時候初始化一個值。
• let聲明塊范圍內的局部變量，可以在聲明的時候初始化一個值。
• const聲明一個只讀常量，聲明的時候必須初始化。

tips: JS是大小寫敏感的

變量和常量

• 命名要以數字字母下划線開頭

  例如，在class Hello上面添加兩行：

  var mainText = "學習React Native"
  var subText = "歡迎閱讀"
  

  Tips:JS是一個動態類型語言(dynamically typed language)中，所以變量不需聲明類型，必要的時候自動轉換。

  然后，修改index.ios.js，讓text來顯示這兩個變量：

  export default class Hello extends Component {
      render() {
          return (
              <View style={styles.container}>
                  <Text style={styles.welcome}>
                      {mainText}
                  </Text>
                  
                  <Text style={styles.instructions}>
                      {subText}
                  </Text>
              </View>
          );
      }
  }
  

  然后save，選擇模擬器，command + R刷新，就可以看到如下截圖：
  

  可以看到index.ios.js文件最下面，類似

  const styles = StyleSheet.create();
  

  就是一個常量，聲明的時候必須初始化。

數據結構和類型

六種基本的原型數據類型：

• Boolean: 布爾值，true或者false
• null: 一個表明null的特殊關鍵字，注意JS中大小寫敏感，null和NULL是完全不同的東西
• undefined: 變量未定義的屬性
• Number: 數字
• String: 字符串
• Symbol: ES6中新增的，唯一不可變的

以及Object對象類型

流程控制

• if, else
• switch
• for
• while
• break
• continue

這個各個語言都差不多相同，就不在詳細描述了，有一點要提一下，就是JS中switch的case可以是String類型。

還有需要注意的點，以下值在JS中會識別為false：

false
undefined
null
0
NaN
空字符串 ("")

注釋

// 這是一個單行注釋

/* 這是一個多行注釋，可以換行 */

函數

函數的定義如下，由function關鍵字聲明，在()添加輸入，輸入不需要聲明類型：

function scottLog(t){
    console.log(t)
}

我們接着上述項目，添加一個可點擊的TouchableHighlight，在import{}里面添加一行TouchableHighlight，它看起來像這樣：

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

然后，我們重新定義變量和類的內容：

function scottLog(input) {
    console.log(input)
}

export default class Hello extends Component {
  render() {
    return (
        <TouchableHighlight onPress={() => scottLog("點擊了我")} style={styles.container}
                            underlayColor = "#ddd">
          <Text style={styles.welcome}>
            {mainText}
          </Text>
        </TouchableHighlight>
    );
  }
}

保存，選中模擬器，command + R，再點擊屏幕任意位置，看xcode控制台輸出。
上述代碼的scottLog(input)方法是定義在全局的，當定義在類中的時候，不需要function關鍵字，通過this.functionName()來訪問:

export default class Hello extends Component {
  render() {
    return (
        <TouchableHighlight onPress={() => this.scottLog("點擊了我")} style={styles.container}
                            underlayColor = "#ddd">
          <Text style={styles.welcome}>
            {mainText}
          </Text>
        </TouchableHighlight>
    );
  }

  scottLog(input){
      console.log(input)
  }
}

箭頭函數

沒有接觸過JS的同學可能會對上述的() => this.scottLog()這一行感到很奇怪，其實這里onPress是一個函數類型(在JS中，函數本身也是一種類型)。這其實是JS的箭頭函數，它提供了一種更簡潔的函數表達式。我們修改上述的scottLog(input)函數，

scottLog(){
      var a = ["zhangsan", "lisi", "wangwu"];
      var a2 = a.map(function (s) {
          return s.length
      })

      var a3 = a.map((s) => s.length)
      console.log(a2)
      console.log(a3)
  }

保存，選中模擬器，Commnad+R刷新，可以看到兩個log的內容是一樣的。也就是說，(s)用來描述參數，=>后的表示方法的執行體。學過swift的童鞋，會發現和swift的閉包很像。

數組

可以由以下三種方式創建數組，訪問數組的方式還是通過角標來訪問

var test = [1, 2, 3, 4]
var test2 = new Array(1, 2, 3, 4)
var test3 = Array(1, 2, 3, 4)

console.log(test[1])

數組的一些其他操作，可以在MDN查找。

字典

var map = {"key1":"value1","key2":"value2"}
map["key3"] = "value3"

console.log(map["key1"])
console.log(map["key3"])

對象

JS中的對象的屬性可以不先聲明，而在運行時候動態添加，例如:

var p = new Object()
p.name = "scott"
console.log(p.name);

所以，在React Native中，寫代碼的時候，存儲數據直接this.propertyName ＝即可。

致謝

如果發現有錯誤的地方，歡迎各位指出，謝謝！