React-Native 之 View使用

時間 2019-11-08

標籤 react native view 使用欄目 React 简体版

原文原文鏈接

前言

學習本系列內容須要具有必定 HTML 開發基礎，沒有基礎的朋友能夠先轉至 HTML快速入門(一) 學習android
本人接觸 React Native 時間並非特別長，因此對其中的內容和性質瞭解可能會有所誤差，在學習中若是有錯會及時修改內容，也歡迎萬能的朋友們批評指出，謝謝app
文章初版出自簡書，若是出現圖片或頁面顯示問題，煩請轉至簡書查看也但願喜歡的朋友能夠點贊，謝謝佈局

JSX 和組件的概念

React的核心機制之一就是虛擬DOM（能夠在內存中建立的虛擬DOM元素）React利用虛擬DOM來減小對實際DOM的操做從而提高性能。傳統的建立方式以下：性能
```
var newBox = document.createElement('div');
    newBox.className = 'box';
    $('main').appendChild(newBox);
```
上面的代碼在可讀性方面比較很差，因此 React 開發了 JSX，利用咱們熟悉的 HTML 語法來建立虛擬 DOM,建立方式以下：學習
```
<div className="box">
    </div>
```
在實際開發中，JSX在產品打包階段已經編譯成純 JavaScript, JSX的語法不會帶來任何性能影響。因此，JSX能夠當作是比較高級但依然直觀的語法糖flex

View 組件中常見的屬性

React Native 組件 View,其做用等同於iOS中的 UIView,Android中的 android.view 或者網頁中的
標籤，它是全部組件的父組件，也能夠說全部組件繼承了它的全部屬性
這邊就將它常見的屬性羅列出來：
- 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'
```
  效果：
  - dotted
```
// 邊框風格
    borderStyle:'dotted'
```
  效果：
  - dashed
```
// 邊框風格
    borderStyle:'dashed'
```
  效果：
- borderTopColor：頂部邊框顏色（參考上面）3d
- borderTopWidth：頂部邊框寬度（參考上面）code
- borderTopLeftRadius：頂部左邊圓角（參考上面）orm
- 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 開發中，推薦咱們採用 StyleSheet 來進行組件的佈局，這樣從代碼結構上來看會更加清晰，有利於後期的維護

咱們將上面的樣式經過 StyleSheet 方式來實現

視圖部分

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'
        }

    });