前言
學習本系列內容需要具備一定 HTML 開發(fā)基礎蕾总，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習
本人接觸 React Native 時間并不是特別長溶耘，所以對其中的內容和性質了解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批評指出膳帕，謝謝
文章第一版出自簡書，如果出現(xiàn)圖片或頁面顯示問題薇缅，煩請轉至 簡書 查看 也希望喜歡的朋友可以點贊危彩，謝謝
JSX 和 組件 的概念
-
React的核心機制之一就是虛擬DOM（可以在內存中創(chuàng)建的虛擬DOM元素）React利用虛擬DOM來減少對實際DOM的操作從而提升性能攒磨。傳統(tǒng)的創(chuàng)建方式如下：
var newBox = document.createElement('div'); newBox.className = 'box'; $('main').appendChild(newBox); -
上面的代碼在可讀性方面比較不好，所以 React 開發(fā)了 JSX恬砂，利用我們熟悉的 HTML 語法來創(chuàng)建虛擬 DOM,創(chuàng)建方式如下：
<div className="box"> </div> 在實際開發(fā)中咧纠，JSX在產品打包階段已經編譯成純 JavaScript, JSX的語法不會帶來任何性能影響。所以泻骤，JSX可以看成是比較高級但依然直觀的語法糖
View 組件中常見的屬性
React Native 組件 View,其作用等同于iOS中的 UIView,Android中的 android.view 或者網頁中的 <div> 標簽漆羔，它是所有組件的父組件，也可以說所有組件繼承了它的所有屬性
-
這邊就將它常見的屬性羅列出來：
- Flexbox：彈性布局（Flexbox的介紹可以點我）
- Transforms：動畫屬性
- backfaceVisibility('visible', 'hidden')：定義界面翻轉的時候是否可見
- backgroundColor：背景顏色
// 背景顏色 backgroundColor:'red'效果：
背景顏色- borderBottomColor：底部邊框顏色
// 底部邊框寬度 borderBottomWidth:5, // 底部邊框顏色 borderBottomColor:'green'效果：
底部邊框顏色- borderBottomLeftRadius：底部左邊邊框圓角
// 底部邊框左圓角 borderBottomLeftRadius:5效果：
底部左邊邊框圓角- borderBottomRightRadius：
// 底部邊框右圓角 borderBottomRightRadius:5效果：
底部右邊邊框圓角- borderBottomWidth：底部邊框寬度
// 底部邊框寬度 borderBottomWidth:5效果：
底部邊框寬度- borderColor：邊框顏色
// 全體邊框寬度 borderWidth:5, // 全體邊框顏色 borderColor:'yellow'效果：
邊框顏色- borderLeftColor：左邊框顏色
// 左邊邊框顏色 borderLeftColor:'black'效果：
左邊邊框顏色- borderLeftWidth：左邊邊框寬度
// 左邊邊框寬度 borderLeftWidth:10效果：
左邊邊框寬度- borderRadius：邊框圓角
// 全體邊框寬度 borderWidth:5, // 全體邊框顏色 borderColor:'black', // 全體邊框圓角 borderRadius:3效果：
邊框圓角- borderRightColor：右邊邊框顏色
// 右邊框顏色 borderRightColor:'yellow'效果：
右邊框顏色- borderRightWidth：右邊邊框寬度
// 右邊框寬度 borderRightWidth:10效果：
右邊框寬度-
borderStyle('solid', 'dotted', 'dashed')：邊框風格
- solid
// 邊框風格 borderStyle:'solid'效果：
solid- dotted
// 邊框風格 borderStyle:'dotted'效果：
dotted- dashed
// 邊框風格 borderStyle:'dashed'效果：
dashed - solid
borderTopColor：頂部邊框顏色（參考上面）
borderTopWidth：頂部邊框寬度（參考上面）
borderTopLeftRadius：頂部左邊圓角（參考上面）
borderTopRightRadius：頂部右邊圓角（參考上面）
borderWidth：邊框寬度
// 全體邊框寬度 borderWidth:5效果：
全體邊框寬度- opacity：設置透明度狱掂，取值從 0~1
// 透明度 opacity:0.5效果：
透明度overflow('visible', 'hidden')：設置內容超出容器部分是否顯示（以后的文章講解）
elevation：高度演痒，設置Z軸，可產生立體效果（以后文章講解）
View 組件使用
- 簡單使用
render() {
return (
<View style={styles.container}>
<View style={{width:300, height:100, backgroundColor:'red', borderWidth:1, borderColor:'black'}}>
</View>
</View>
);
}
-
上面代碼是我們熟悉的 CSS 寫法
效果：
基本使用 在 React Native 開發(fā)中趋惨，推薦我們采用 StyleSheet 來進行組件的布局鸟顺，這樣從代碼結構上來看會更加清晰，有利于后期的維護
-
我們將上面的樣式通過 StyleSheet 方式來實現(xiàn)
- 視圖部分
var test = React.createClass({ render() { return ( <View style={styles.container}> <View style={styles.viewStyle}> </View> </View> ); } });- 樣式部分
var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, viewStyle: { // 尺寸 width:300, height:100, // 背景顏色 backgroundColor:'red', // 邊框寬度 borderWidth:1, // 邊框顏色 borderColor:'black' } }); - 視圖部分
