前言
本篇的主要內容如下：
- JSX和組件的概念
- 組件View
- 組件Text
- 樣式表
一、JSX和組件的概念
1. JSX
-
傳統通過JS布局頁面的方式如下：
var img = document.createElement("img"); img.src="images/1.jpg"; $("#main").appendChild(newBox);相對于JSX，這樣的代碼可讀性并不好，于是React發明了JSX,利用我們熟悉的XML語法來創建DOM
var root = ( <div class="box"> <img src=""/> </div> ) -
JSX和JS的區別
在實際開發中，JSX在產品打包階段已經編譯成純javascript，JSX并不會給這些JS代碼帶來任何的性能影響。
JSX本身并不是什么高深的技術，可以說只是一個比較高級但很直觀的語法糖。
-
語法糖
指計算機語言中添加的某種語法，這種語法對語言的功能并沒有影響，但是更方便程序員使用。通常來說使用語法糖能夠增加代碼的可讀性，從而減少程序代碼出錯的機會。
2. 組件
-
在HTML中我們可以把img/div/span等叫做標簽，但不能把div和img的組合叫做標簽，比如，如下整體我們就不能叫做標簽，另外我組合起來的內容復用過程也比較麻煩
<div> <img src=""/> </div> -
在RN模塊中給我們提供了一些基礎的組件View/Text等，此時我們也可以把View/Text的組合叫做組件，而且復用起來也比較簡單
var MyView = React.createClass({ render(){ return ( <View> <Text>HELLO WORLD</Text> </View> ) } }) -
組件的創建
這是ES5創建組件的方式,上一篇也提到過，組件的本質是一個對象，每個組件里面都有個render方法，render方法的返回值就是JSX(JSX語法要用小括號括起來),專門用來設置該組件的UI。
var MyView = React.createClass({ render(){ return ( <View></View> ) }, })
二、組件View
就像開發web應用程序中，需要使用很多的HTML標簽。例如 div，form。但是在基于DIV+CSS布局的web開發中，最為重要的元素就是Div 。 Div是頁面布局的基礎，是作為容器元素存在的。在React Native中，類似于HTML的DIV的組件就是 View組件。我們在寫RN時UI都要叫組件。
RN中的組件父元素可以被子元素的寬和高撐起來，這種方式大大便利了我們的布局方式，而原生的iOS中的UIView達不到這個效果。
-
View在Web、Android、iOS三種平臺上面，View視圖分別對應三種平臺原生視圖，在iOS中對應UIView，在Web中對應< div >標簽，Android對應android.view，下面是一個簡單示例
示例代碼效果 -
注意事項
通過style屬性給View設置樣式，樣式是一個對象,所以用大括號括起來，并且樣式屬性之間用逗號分隔
width和height等一些number類型的樣式屬性都不需要在后面加單位
每個組件只能有一個根組件, 這個跟XML類似。
-
關于View的一些樣式屬性以及屬性類型見下圖
view的樣式屬性.jpg
-
另外RN的組件是可以嵌套的，如下
var MyView = React.createClass({ render(){ return ( //如果不設置父元素的寬高、子元素將會把父元素的寬高給撐起來。可以自己試試 <View style={ {backgroundColor:"red",width:300,height:300} }> <View style={{backgroundColor:"blue",width:100,height:100}}></View> <View style={{backgroundColor:"orange",width:200,height:200}}></View> </View> ) } })效果如下：
三、組件Text
Text組件是RN中的一個基本組件，這個和iOS上的UILabel與Android上的TextView組件相類似，就是用來顯示文本的，這個組件除了基本的顯示布局之外，可以嵌套使用，設置樣式，添加事件處理功能
RN組件要設置文本必須要放置到Text組件中，直接在View組件中放置文本是會報錯的
-
Text的常用屬性和方法，切結這是組件的屬性不是樣式屬性
比如：
//后面的()=>press()是ES6中的箭頭函數，建議看看阮一峰的書自己查看一下 <Text numberOfLines={2} onLongPress={()=>press()}></Text> -
Text的樣式屬性
-
Text的嵌套
HTML中我們可能會可以使用如下的方式給一段文本中的某個詞設置特殊樣式
<div>跳樓價,跳樓價,每件只要<span style="color:red;fontSize:40px">998</span></div>在RN中我們可以使用Text的嵌套來實現
<Text>跳樓價,跳樓價,每件只要<Text style={{color:"red",fontSize:40}}>998</Text></Text>
效果如下：
-
使用Text來做按鈕
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; var demo1 = React.createClass({ render(){ <Text onPress={()=>this.press()} >我是Text模擬的按鈕</Text> }, press(){ alert("alert"); } }) AppRegistry.registerComponent('demo1', () => demo1);
三、樣式表
- 之前我們設置樣式就是在組件的style屬性里寫上他的樣式對象，但這種方式跟HTML的內聯方式一樣，維護起來較為麻煩，RN專門提供了一個StyleSheet幫組我們給元素設置外聯樣式。寫法如下：
- 我們一般的做法是給每個組件設置一個樣式對象，里面的子組件的樣式設置在樣式對象的屬性里。
四、補充
1. 組件的樣式屬性和屬性的區別
這第一點一定要搞明白，要不然你在設置屬性的時候會很迷惑的。
<View>
//numberOfLines是組件的屬性 backgroundColor是組件的樣式屬性
<Text numberOfLines={4} style={{backgroundColor:red}}>樣式屬性和屬性的區別</Text>
</View>