React Native入門項(xiàng)目與解析
通過React Native 環(huán)境搭建和創(chuàng)建項(xiàng)目(Mac)可以成功創(chuàng)建一個(gè)新項(xiàng)目，即直接利用以下語句創(chuàng)建：
- //命令行創(chuàng)建項(xiàng)目：
- react-native init AwesomeProject
創(chuàng)建成功后，剛?cè)腴T的我們主要關(guān)注兩個(gè)文件：
1)iOS項(xiàng)目目錄下的AppDelegate.m
為將iOS項(xiàng)目連接js文件的入口，以及相關(guān)初始化操作。
2)根目錄下的index.ios.js
為iOS對(duì)應(yīng)的js入口文件。
一、 解析iOS項(xiàng)目中的AppDelegate.m
1. AppDelegate.m 代碼如下：
- #import "AppDelegate.h"
- // React Native相關(guān)頭文件
- #import "RCTBundleURLProvider.h"
- #import "RCTRootView.h"
- @implementation AppDelegate
- - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- {
- NSURL *jsCodeLocation;
- /*
- 當(dāng)應(yīng)用開始運(yùn)行的時(shí)候，RCTRootView將會(huì)從以下的URL中加載應(yīng)用：(本地調(diào)試的時(shí)候是直接在本地服務(wù)器中的index.ios加載，發(fā)布時(shí)設(shè)置有所不同)
- 重新調(diào)用了你在運(yùn)行這個(gè)App時(shí)打開的終端窗口，它開啟了一個(gè) packager 和 server 來處理上面的請(qǐng)求。
- 在 Safari 中打開那個(gè) URL;你將會(huì)看到這個(gè) App 的 JavaScript 代碼
- */
- [[RCTBundleURLProvider sharedSettings] setDefaults];
- jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
- // RCTRootView是一個(gè)UIView容器，承載著React Native應(yīng)用。同時(shí)它也提供了一個(gè)聯(lián)通原生端和被托管端的接口。
- RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
- moduleName:@"AwesomeProject"
- initialProperties:nil
- launchOptions:launchOptions];
- rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
- self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
- UIViewController *rootViewController = [UIViewController new];
- rootViewController.view = rootView;
- self.window.rootViewController = rootViewController;
- [self.window makeKeyAndVisible];
- return YES;
- }
- @end
2. RCTRootView
RCTRootView將React Natvie視圖封裝到原生組件中。(用戶能看到的一切內(nèi)容都來源于這個(gè)RootView，所有的初始化工作也都在這個(gè)方法內(nèi)完成。)
解析：
通過RCTRootView的初始化函數(shù)你可以將任意屬性傳遞給React Native應(yīng)用。
參數(shù)initialProperties必須是NSDictionary的一個(gè)實(shí)例。
這一字典參數(shù)會(huì)在內(nèi)部被轉(zhuǎn)化為一個(gè)可供JS組件調(diào)用的JSON對(duì)象。
- NSArray *imageList = @[@"http://foo.com/bar1.png",
- @"http://foo.com/bar2.png"];
- NSDictionary *propsDict = @{@"images" : imageList};
- RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
- moduleName:@"AwesomeProject"
- initialProperties: propsDict
- launchOptions:launchOptions];
在js文件中，則是通過this.props.images調(diào)用上面定義的參數(shù)。
this為AppRegistry.registerComponent注冊(cè)的組件(下面會(huì)講到)
RCTRootView同樣提供了一個(gè)可讀寫的屬性appProperties。在appProperties設(shè)置之后，React Native應(yīng)用將會(huì)根據(jù)新的屬性重新渲染。當(dāng)然，只有在新屬性和之前的屬性有區(qū)別時(shí)更新才會(huì)被觸發(fā)。
(注意：1.可以隨時(shí)更新屬性，但是更新必須在主線程中進(jìn)行，讀取則可以在任何線程中進(jìn)行。2.更新屬性時(shí)并不能做到只更新一部分屬性)
- NSArray *imageList = @[@"http://foo.com/bar3.png",
- @"http://foo.com/bar4.png"];
- rootView.appProperties = @{@"images" : imageList};
二、解析js入口文件(index.ios.js)
1. index.ios.js 代碼如下：
- 'use strict'; // 全局進(jìn)入嚴(yán)格模式(目前發(fā)現(xiàn)不用也行)
- /**<
- 消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;
- 消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全;
- 提高編譯器效率，增加運(yùn)行速度;
- 為未來新版本的Javascript做好鋪墊。
- */
- //導(dǎo)入一些必要的模塊
- //React Native內(nèi)置的組件可以直接通過import { xxx } from 'react-native' 進(jìn)行導(dǎo)入，當(dāng)然也可以自定義組件。
- import React, { Component } from 'react';
- import {
- AppRegistry,
- StyleSheet,
- Text,
- View,
- TouchableOpacity
- } from 'react-native';
- //類，這是默認(rèn)的載入類，繼承自Component，Component類(組件)似于Android和iOS中的View
- //這里為創(chuàng)建一個(gè)組件
- class AwesomeProject extends Component {
- //構(gòu)造器 ，每個(gè)組件都擁有自己的屬性(props)和狀態(tài)(state)
- //調(diào)用this.setState更改狀態(tài)text或者isTouchDown時(shí)，組件會(huì)觸發(fā)render函數(shù)進(jìn)行渲染更新
- constructor(props) {
- super(props);
- this.state = {
- text:'Welcome to React Native!',
- isTouchDown:false
- };
- }
- //在最初的渲染之前調(diào)用一次，可在里面進(jìn)行預(yù)處理操作
- //在React中，設(shè)置this.state會(huì)導(dǎo)致重新渲染，但是componentWillMount設(shè)置this.state并不會(huì)對(duì)導(dǎo)致render調(diào)用多次
- //之后會(huì)對(duì)component的生命周期進(jìn)一步解釋
- componentWillMount() {
- }
- //渲染函數(shù)，用來渲染實(shí)際的Component可視部分
- render() {
- //var定義變量，根據(jù)狀態(tài)值改變對(duì)應(yīng)值
- var welcomeText = this.state.text;
- var bgcolor;
- if (this.state.isTouchDown) {
- bgcolor = '#c5c5ab';
- } else {
- bgcolor = '#F5FCFF';
- }
- console.log('testtststststts');
- //返回的即界面顯示內(nèi)容
- return (
- <View style={[styles.container, {backgroundColor: bgcolor}]}>
- <Text style={styles.welcome}>
- {welcomeText}
- </Text>
- <Text style={styles.instructions}>
- To get started, edit index.android.js
- </Text>
- <Text style={styles.instructions}>
- Shake or press menu button for dev menu
- </Text>
- <TouchableOpacity onPress={this.touchDown.bind(this)}>
- <Text style={[styles.instructions, {backgroundColor: 'green'}]}>
- test touch Me
- </Text>
- </TouchableOpacity>
- </View>
- );
- }
- // 自定義函數(shù)
- touchDown() {
- // console.log 控制臺(tái)打印，可打印值，多用于調(diào)試
- console.log('>>', this.isTouchDown);
- if (!this.state.isTouchDown) {
- this.setState({
- text:'Test Touch Down Success',
- isTouchDown:true
- });
- } else {
- this.setState({
- text:'Test Touch Down Again Success',
- isTouchDown:false
- });
- }
- }
- }
- //定義樣式
- 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 定義了App的入口，并提供了根組件。
- //***個(gè)'AwesomeProject'要與AppDelegate里注冊(cè)的moduleName一致
- //第二個(gè)AwesomeProject則是入口組件，即上面定義的Component類
- AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
2. 運(yùn)行效果：
簡(jiǎn)單運(yùn)行效果.png
3. 基礎(chǔ)概念解釋
1)組件
代碼中的 Text, View, TouchableOpacity均為基礎(chǔ)組件。AwesomeProject則是自己創(chuàng)建的組件，也作為項(xiàng)目的入口組件。
在React Native項(xiàng)目中，所有展示的界面，都可以看做是一個(gè)組件(Component)只是功能和邏輯上的復(fù)雜程度不同。每一個(gè)是許許多多小的組件拼成的，每個(gè)小的組件也有自己對(duì)應(yīng)的邏輯。
2)組件的狀態(tài)與屬性
組件本質(zhì)上是狀態(tài)機(jī)，輸入確定，輸出一定確定。組件把狀態(tài)與結(jié)果一一對(duì)應(yīng)起來，組件中有state與prop(狀態(tài)與屬性)。
屬性(props)是標(biāo)簽里面的屬性, 組件之前通過標(biāo)簽的屬性來傳遞數(shù)據(jù)，由父組件傳遞給子組件(單向的屬性傳遞)。
如果component的某些狀態(tài)由外部所決定，并且會(huì)影響到component的render，那么這些狀態(tài)就應(yīng)該用props表示。
例如：一個(gè)下拉菜單的component，有哪些菜單項(xiàng)，是由這個(gè)component的使用者和使用場(chǎng)景決定的，那么“菜單項(xiàng)”這個(gè)狀態(tài)，就應(yīng)該用props表示，并且由外部傳入。
狀態(tài)(state)是子組中的狀態(tài)，內(nèi)部的事件方法或者生命周期方法都可以調(diào)用this.setState來變更，當(dāng)狀態(tài)發(fā)生變化的同時(shí)，組件也會(huì)觸發(fā)render函數(shù)進(jìn)行渲染更新。
如果component的某些狀態(tài)需要被改變，并且會(huì)影響到component的render，那么這些狀態(tài)就應(yīng)該用state表示。
例如：一個(gè)購(gòu)物車的component，會(huì)根據(jù)用戶在購(gòu)物車中添加的產(chǎn)品和產(chǎn)品數(shù)量，顯示不同的價(jià)格，那么“總價(jià)”這個(gè)狀態(tài)，就應(yīng)該用state表示。
