React Native 系列(一)
前言
本系列是基於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
此庫體積龐大,在國內即便FQ也很難下載成功,導致很多人無法正常運行iOS
項目。中文網在
論壇中提供了這些庫的國內下載鏈接。如果你嫌麻煩,又沒
有對新版本的需求,那麽可以暫時創建0.44.3
的版本。
執行此命令的時候不要FQ。(我也不知道為什麽,一開始打開藍燈,一直失敗,退出藍燈之後,就能安裝成功。)執行成功之後,會生成如下文件:
-
運行項目
由於筆者電腦上
android
的環境沒有配置,所以本系列講述的都是在index.ios.js
上修改。(註意:每次修改代碼,不需要重新運行,只需要保存修改,然後使用command
+R
就能動態刷新)運行項目有兩種方式:
- 在終端執行
react-native run-ios
- 直接用
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 =
即可。
致謝
如果發現有錯誤的地方,歡迎各位指出,謝謝!
React Native 系列(一)