React Native常用元件Image使用

阿新 • • 發佈：2019-01-10

前言

學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習
本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質瞭解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批評指出，謝謝
文章第一版出自簡書，如果出現圖片或頁面顯示問題，煩請轉至簡書檢視也希望喜歡的朋友可以點贊，謝謝

Image元件的常見屬性

屬性方法
- onLoad(function）:當圖片載入成功後，回撥該方法
- onLoadStart（function）:當圖片開始載入的時候呼叫該方法
- onLoadEnd(function）:當圖片載入失敗回撥該方法，不會管圖片載入成功還是失敗
- onLayout（function）:當 Image 佈局發生變化會呼叫該方法，呼叫程式碼
```
    {nativeEvent: {layout: {x, y, width, height}}}
```
- resizeMode:縮放比例，（包含可選引數’cover’, ‘contain’, ‘stretch’）,當該圖片的尺寸超過佈局的尺寸時，會根據設定 Mode 進行縮放或剪裁圖片
- source{uri:string}:進行標記圖片引用，該引數可以為一個網路 url地址 或者一個本地路徑
樣式屬性
- FlexBox：支援彈性盒子風格
- Transforms：支援屬性動畫
- backgroundcolor：背景顏色
- borderColor：邊框顏色
- borderWidth：邊框寬度
- borderRadius：邊框圓角
- overflow：設定圖片尺寸超過容器可以設定顯示或隱藏(‘visible’, ‘hidden’)
- tintColor：顏色設定
- opacity：設定透明度（取值範圍0.0（全透明）~ 1.0（不透明））

Image元件的介紹和使用

Image 在開發中是經常接觸到的元件，通過它，我們可以展示需要展示的圖片資源，在 React Native 中該元件可以通過多種方式價值啊圖片資源
在介紹幾種載入圖片資源的方式之前，先確定一下圖片的樣式，如下
```
    imgStyle: {
        width 
:100,
        height:100,
    }
```
- 從當前RN專案中載入圖片資源，和 html 一樣，我們需要將圖片放到 RN 專案中，這邊我建立了個 img 資料夾，裡面包含了需要使用到的圖片資源
  - 不設定尺寸的情況下，預設會根據圖片資源的大小來展示圖片
```
    {/* 不設定尺寸的情況下 */}
    <Image source={require('./img/icon.jpg')}></Image>  
```
  效果：
  - 我們可以通過設定尺寸或者改變 Image 的填充模式來改變所展示的圖片樣式，這邊就先約束寬高，後面會具體介紹怎麼改變圖片的填充模式
```
    {/* 設定尺寸的情況下 */}
    <Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image>
```
  效果：
- 載入APP中的圖片資源
  - 以iOS為例，我們根據原生的開發習慣把圖片放到 images.xcassets 中，這樣在編譯連結完成後，會將裡面的圖片統一打包以供使用
  - 如果是Android的話，需要開啟目錄 android/app/src/res/ ，將圖片按照安卓原生開發習慣將不同大小的圖片方便放進四個資料夾內
  - 完成了圖片的匯入，最好重新執行模擬器，以確保圖片已經正確打包，然後就是使用圖片的時候了
```
    {/* 和上面一樣，如果不預先設定尺寸的話，依舊是根據圖片資源原本的大小進行展示 */}
    {/* 路徑書寫格式中 image! 是固定寫法，後面直接加上圖片的名字即可，不可加 .字尾名 */}
    <Image source={require('image!lufei')}></Image>
```
效果：
- 載入來自網路的圖片，圖片是我在淘寶上隨便拿的圖片網路地址，比較大，按照預設的填充方式，會將超出的部分剪裁掉（注意：大括號內的是 uri 不是 url）
```
    {/* uri是固定寫法，後面跟上圖片網路URL地址的字串即可，還有，網路圖片必須設定圖片的大小，否則無法顯示，一般還需要配合填充方式以達到想要的效果 */}
    <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>
```
效果：

Image元件填充效果試驗場

看完了上面的內容，相信應該對 Image 的使用已經瞭解的差不多了吧，這裡繼續為各位見解 Image 的幾種填充模式，改變 Image元件的填充模式，需要使用到 resizeMode屬性，它包含了3個可選引數，下面就以載入網路圖片為例

先載入網路圖片，並設定樣式

    // 匯入Dimensions庫
    var Dimensions = require('Dimensions');

    // 入口
    export default class TestRN extends Component {
        render() {
            return (
                <View style={styles.container}>
                <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>
                </View>
            );
        }
    }

    // 樣式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'blue',
            flex:1,
        },

        imgStyle: {
            // 設定背景顏色
            backgroundColor:'green',
            // 設定寬度
            width:Dimensions.get('window').width,
            // 設定高度
            height:150
        }
    });

效果：
初始化效果

cover( 預設)：圖片居中顯示且不拉伸圖片，超出的部分剪裁掉

    imgStyle: {
            // 設定背景顏色
            backgroundColor:'green',
            // 設定寬度
            width:Dimensions.get('window').width,
            // 設定高度
            height:150,
            // 設定圖片填充模式
            resizeMode:'cover'
        }

效果：
cover 模式效果

contain：容器完全容納圖片，圖片等比例進行拉伸

    imgStyle: {
            // 設定背景顏色
            backgroundColor:'green',
            // 設定寬度
            width:Dimensions.get('window').width,
            // 設定高度
            height:150,
            // 設定圖片填充模式
            resizeMode:'contain'
        }

效果：
contain 填充效果

stretch：圖片被拉伸至與容器大小一致，可能會發生變形

    imgStyle: {
            // 設定背景顏色
            backgroundColor:'green',
            // 設定寬度
            width:Dimensions.get('window').width,
            // 設定高度
            height:150,
            // 設定圖片填充模式
            resizeMode:'stretch'
        }

效果：
stretch 填充效果

Image元件模擬使用場景

開發中，我們經常將圖片作為背景，然後再其上面新增其他元件以豐富專案內容，讓專案更美觀，那在React Native中，很簡單就可以做到

依舊以上面網路圖片為例，但是先來修改下樣式，看起來跟美觀一些

    // 樣式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'blue',
            flex:1,
            // 設定主軸對齊方式
            justifyContent:'center',
            // 設定側軸對齊方式
            alignItems:'center'
    },

        imgStyle: {
            backgroundColor:'green',
            width:Dimensions.get('window').width,
            height:200,
            // 設定圖片填充模式
            resizeMode:'stretch'
        }
    });

效果：
初始化效果

接下來，我們就直接在 Image元件上新增一個 Text元件

    <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}>
    <Text style={{marginTop:100}}>這是一張來自淘寶的圖片</Text>
      </Image>

效果：
將Image元件作為背景

可以看出，Text元件確實是蓋在 Image元件上，所以在React Native中，將圖片作為背景就是這麼簡單，並不需要進行太複雜的操作

Image元件綜合小專案

現在我們就結合前面的一下教程，用最通俗的方式做一個簡單的QQ訊息模組介面

    import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Image
    } from 'react-native';

    // 匯入Dimensions庫
    var Dimensions = require('Dimensions');

    // 入口
    export default class TestRN extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/* 因為還沒講到listView,這邊就用View代表Cell*/}
                <View style={styles.cellStyle}>
                    {/* 頭像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 暱稱 */}
                    <Text style={styles.nameStyle}>暱稱</Text>
                </View>
                {/* 分隔線 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 頭像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 暱稱 */}
                    <Text style={styles.nameStyle}>暱稱</Text>
                </View>
                {/* 分隔線 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 頭像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 暱稱 */}
                    <Text style={styles.nameStyle}>暱稱</Text>
                </View>
                {/* 分隔線 */}
                <View style={styles.lineStyle}></View>
            </View>
            );
        }
    }

    // 樣式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'white',
            flex:1,
            // 設定換行方式
            flexWrap:'wrap'
        },

        cellStyle: {
            // 尺寸
            height:44,
            width:Dimensions.get('window').width,
            // 設定背景顏色
            backgroundColor:'white',
            // 設定主軸方向
            flexDirection:'row',
            // 設定側軸對齊方式
            alignItems:'center'
        },

        imgStyle: {
            width:30,
            height:30,
            // 設定圖片填充模式
            resizeMode:'cover',
            // 設定圓角
            borderRadius:15,
            // 設定圖片位置
            marginLeft:10
        },

        nameStyle: {
            // 設定暱稱位置
            marginLeft:10
        },

        lineStyle: {
            // 背景色
            backgroundColor:'black',
            // 設定尺寸
            width:Dimensions.get('window').width,
            height:1
        }

    });

    AppRegistry.registerComponent('TestRN', () => TestRN);

Image元件的常見屬性

屬性方法
- onLoad(function）:當圖片載入成功後，回撥該方法
- onLoadStart（function）:當圖片開始載入的時候呼叫該方法
- onLoadEnd(function）:當圖片載入失敗回撥該方法，不會管圖片載入成功還是失敗
- onLayout（function）:當 Image 佈局發生變化會呼叫該方法，呼叫程式碼
```
    {nativeEvent: {layout: {x, y, width, height}}}
```
- resizeMode:縮放比例，（包含可選引數’cover’, ‘contain’, ‘stretch’）,當該圖片的尺寸超過佈局的尺寸時，會根據設定 Mode 進行縮放或剪裁圖片
- source{uri:string}:進行標記圖片引用，該引數可以為一個網路 url地址 或者一個本地路徑
樣式屬性
- FlexBox：支援彈性盒子風格
- Transforms：支援屬性動畫
- backgroundcolor：背景顏色
- borderColor：邊框顏色
- borderWidth：邊框寬度
- borderRadius：邊框圓角
- overflow：設定圖片尺寸超過容器可以設定顯示或隱藏(‘visible’, ‘hidden’)
- tintColor：顏色設定
- opacity：設定透明度（取值範圍0.0（全透明）~ 1.0（不透明））

Image元件的介紹和使用

Image 在開發中是經常接觸到的元件，通過它，我們可以展示需要展示的圖片資源，在 React Native 中該元件可以通過多種方式價值啊圖片資源
在介紹幾種載入圖片資源的方式之前，先確定一下圖片的樣式，如下
```
    imgStyle: {
        width:100,
        height:100,
    }
```
- 從當前RN專案中載入圖片資源，和 html 一樣，我們需要將圖片放到 RN 專案中，這邊我建立了個 img 資料夾，裡面包含了需要使用到的圖片資源
  - 不設定尺寸的情況下，預設會根據圖片資源的大小來展示圖片
```
    {/* 不設定尺寸的情況下 */}
    <Image source={require('./img/icon.jpg')}></Image>  
```
  效果：
  - 我們可以通過設定尺寸或者改變 Image 的填充模式來改變所展示的圖片樣式，這邊就先約束寬高，後面會具體介紹怎麼改變圖片的填充模式
```
    {/* 設定尺寸的情況下 */}
    <Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image>
```
  效果：
- 載入APP中的圖片資源
  - 以iOS為例，我們根據原生的開發習慣把圖片放到 images.xcassets 中，這樣在編譯連結完成後，會將裡面的圖片統一打包以供使用
  - 如果是Android的話，需要開啟目錄 android/app/src/res/ ，將圖片按照安卓原生開發習慣將不同大小的圖片方便放進四個資料夾內
  - 完成了圖片的匯入，最好重新執行模擬器，以確保圖片已經正確打包，然後就是使用圖片的時候了
```
    {/* 和上面一樣，如果不預先設定尺寸的話，依舊是根據圖片資源原本的大小進行展示 */}
    {/* 路徑書寫格式中 image! 是固定寫法，後面直接加上圖片的名字即可，不可加 .字尾名 */}
    <Image source={require('image!lufei')}></Image>
```
效果：
- 載入來自網路的圖片，圖片是我在淘寶上隨便拿的圖片網路地址，比較大，按照預設的填充方式，會將超出的部分剪裁掉（注意：大括號內的是 uri 不是 url）
```
    {/* uri是固定寫法，後面跟上圖片網路URL地址的字串即可，還有，網路圖片必須設定圖片的大小，否則無法顯示，一般還需要配合填充方式以達到想要的效果 */}
    <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>
```
效果：

Image元件填充效果試驗場

看完了上面的內容，相信應該對 Image 的使用已經瞭解的差不多了吧，這裡繼續為各位見解 Image 的幾種填充模式，改變 Image元件的填充模式，需要使用到 resizeMode屬性，它包含了3個可選引數，下面就以載入網路圖片為例

先載入網路圖片，並設定樣式

    // 匯入Dimensions庫
    var Dimensions = require('Dimensions');

    // 入口
    export default class TestRN extends Component {
        render() {
            return (
                <View style={styles.container}>
                <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>
                </View>
            );
        }
    }

    // 樣式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'blue',
            flex:1,
        },

        imgStyle: {
            // 設定背景顏色
            backgroundColor:'green',
            // 設定寬度
            width:Dimensions.get('window').width,
            // 設定高度
            height:150
        }
    });

效果：
初始化效果

cover( 預設)：圖片居中顯示且不拉伸圖片，超出的部分剪裁掉

    imgStyle: {
            // 設定背景顏色
            backgroundColor:'green',
            // 設定寬度
            width:Dimensions.get('window').width,
            // 設定高度
            height:150,
            // 設定圖片填充模式
            resizeMode:'cover'
        }

效果：
cover 模式效果

contain：容器完全容納圖片，圖片等比例進行拉伸

    imgStyle: {
            // 設定背景顏色
            backgroundColor:'green',
            // 設定寬度
            width:Dimensions.get('window').width,
            // 設定高度
            height:150,
            // 設定圖片填充模式
            resizeMode:'contain'
        }

效果：
contain 填充效果

stretch：圖片被拉伸至與容器大小一致，可能會發生變形

    imgStyle: {
            // 設定背景顏色
            backgroundColor:'green',
            // 設定寬度
            width:Dimensions.get('window').width,
            // 設定高度
            height:150,
            // 設定圖片填充模式
            resizeMode:'stretch'
        }

效果：
stretch 填充效果

Image元件模擬使用場景

開發中，我們經常將圖片作為背景，然後再其上面新增其他元件以豐富專案內容，讓專案更美觀，那在React Native中，很簡單就可以做到

依舊以上面網路圖片為例，但是先來修改下樣式，看起來跟美觀一些

    // 樣式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'blue',
            flex:1,
            // 設定主軸對齊方式
            justifyContent:'center',
            // 設定側軸對齊方式
            alignItems:'center'
    },

        imgStyle: {
            backgroundColor:'green',
            width:Dimensions.get('window').width,
            height:200,
            // 設定圖片填充模式
            resizeMode:'stretch'
        }
    });

效果：
初始化效果

接下來，我們就直接在 Image元件上新增一個 Text元件

    <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}>
    <Text style={{marginTop:100}}>這是一張來自淘寶的圖片</Text>
      </Image>

效果：
將Image元件作為背景

可以看出，Text元件確實是蓋在 Image元件上，所以在React Native中，將圖片作為背景就是這麼簡單，並不需要進行太複雜的操作

Image元件綜合小專案

現在我們就結合前面的一下教程，用最通俗的方式做一個簡單的QQ訊息模組介面單元格

    import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Image
    } from 'react-native';

    // 匯入Dimensions庫
    var Dimensions = require('Dimensions');

    // 入口
    export default class TestRN extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/* 因為還沒講到listView,這邊就用View代表Cell*/}
                <View style={styles.cellStyle}>
                    {/* 頭像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 暱稱 */}
                    <Text style={styles.nameStyle}>暱稱</Text>
                </View>
                {/* 分隔線 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 頭像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 暱稱 */}
                    <Text style={styles.nameStyle}>暱稱</Text>
                </View>
                {/* 分隔線 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 頭像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 暱稱 */}
                    <Text style={styles.nameStyle}>暱稱</Text>
                </View>
                {/* 分隔線 */}
                <View style={styles.lineStyle}></View>
            </View>
            );
        }
    }

    // 樣式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'white',
            flex:1,
            // 設定換行方式
            flexWrap:'wrap'
        },

        cellStyle: {
            // 尺寸
            height:44,
            width:Dimensions.get('window').width,
            // 設定背景顏色
            backgroundColor:'white',
            // 設定主軸方向
            flexDirection:'row',
            // 設定側軸對齊方式
            alignItems:'center'
        },

        imgStyle: {
            width:30,
            height:30,
            // 設定圖片填充模式
            resizeMode:'cover',
            // 設定圓角
            borderRadius:15,
            // 設定圖片位置
            marginLeft:10
        },

        nameStyle: {
            // 設定暱稱位置
            marginLeft:10
        },

        lineStyle: {
            // 背景色
            backgroundColor:'black',
            // 設定尺寸
            width:Dimensions.get('window').width,
            height:1
        }

    });

    AppRegistry.registerComponent('TestRN', () => TestRN);

效果：
簡單QQ訊息介面單元格

Image元件的使用就先簡單介紹到這裡，在後續的文章中，會在實際的開發場景中帶大家更多更細緻地講解 Image元件,如果你覺得哪裡寫得不好或者有誤，麻煩留言或者用郵箱的方式聯絡我，當然遇到問題也可以，最後如果喜歡我的文章，還請點個贊並關注，讀者的肯定是對我們筆者最大的鼓勵，謝謝！

React Native常用元件Image使用

前言學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質瞭解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批

基於React Native官方元件Image封裝的具備載入生命週期視覺反饋的元件react-native-loading-image

react-native-loading-image 基於React Native官方元件Image封裝的具備載入生命週期視覺反饋的元件,具體實現功能如下：網路圖片Pending狀態渲染，提供閃爍動畫、loading.gif兩種方式網路圖片Error狀態渲染

React Native常用元件樣式總結

作為一個JS、CSS、RN新手，總是會遇到各種樣式。在不知道樣式有些什麼的情況下難以很好的繪製佈局。所以這裡整理了一下幾個常用佈局的樣式。 View Style 支援Flexbox、ShadowPropTypesIOS、Transforms屬性。

【React Native開發】React Native控制元件之Image元件講解與美團首頁頂部效果例項(10)

轉載請標明出處：(一)前言【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org 今天我們一起來看一下Image元件的相關使用講解以及模仿實現一下美團首頁頂部分類的效果。具體環境搭建以及相關配置的請檢視之前

React Native常用第三方元件彙總--史上最全

快取管理https://github.com/reactnativecn/react-native-http-cacheListView的優化https://github.com/sghiassy/react-native-sglistview圖片和base64互轉https://github.com/xfu

React Native 學習之Image元件

/** * @Author: fantasy * @Date: 2016-06-13T17:27:21+08:00 * @Last modified by: fantasy * @Last modified time: 2016-07-11T10:45:42+08:

React Native常用第三方元件

React Native 專案常用第三方元件彙總： react-native-animatable 動畫 react-native-carousel 輪播 react-native-looped-carousel 雙向迴圈播放 react-native-countdown

React Native常用一些元件

分享一個純js的Modal彈窗元件react-native-root-modal 相比其他Modal彈窗元件，這個元件有以下幾個優勢 1.純javascript解決方案，安裝方便 2.同時相容ios和android 3.靈活度相當高，元素外層使用View包裹，你可以對Modal元素新增任何可以在View上新

React Native常用第三方組件匯總--史上最全之一

提示存儲 ext upload body ner board pup wan 把我認為最好的知識，拿來與他人分享，是這一生快事之一！ React Native 項目常用第三方組件匯總： react-native-animatable 動畫 react-na

React Native常用組件樣式總結

div toml mri center tran add pro 自動選擇 adding 作為一個js、CSS、RN新手，總是會遇到各種樣式。在不知道樣式有些什麽的情況下難以很好的繪制布局。所以這裏整理了一下幾個常用布局的樣式。 View Style 支持Flexbox、S

react-native Text和Image混合嵌套布局

ati turn ext style view ima 保險 ext1 text1 <View style={[styles.p4_text1,]}> {"以下各項稅費及商業保險僅供客戶參考不作為最終購車價格".split("").map((str)=&g

react native 常用組件匯總

read iss info eas wiki ora pull 封裝 oot react-native-uploader //文件上傳https://github.com/aroth/react-native-uploader jpush-react-native //官

基於React Native官方元件FlatList，增加可定製化“下拉重新整理”、“下拉載入更多”元件API的新列表元件react-native-refresh-loadmore-flatlist

react-native-refresh-loadmore-flatlist 基於React Native官方元件FlatList，增加可定製化“下拉重新整理”、“下拉載入更多”元件API的新列表元件，具體實現功能如下：自定義下拉重新整理元件API 自定義上拉Lo

React-Native 官方元件FlatLis 關於屬性onEndReached、onEndReachedThreshold的幾點使用總結

FlatList元件為什麼依然這麼難用官方提供的這款List元件相比於上一個版本的ListView來說已經優化很多了，但是，還是不能稱之為一個成熟的元件。 onEndReached、onRefresh兩個屬性的引入說明官方確實是想將下拉重新整理、上拉載入的模式引入這個元件，但是

基於React Native官方元件ScrollView與React-Navigation實現headerTitle與介面的滑動的互動效果react-native-scrollable-contain

react-native-scrollable-container 基於React Native官方元件ScrollView與React-Navigation實現headerTitle與介面的滑動的互動效果 Installation npm install react-nat

React Native基礎元件

轉載請註明出處：小樓一夜聽春雨的專欄http://blog.csdn.net/win816723459/article/details/54134171 本節主要介紹以下元件 View 容器元件（同Html中的div標籤） Text 文字元件（同Html中的p標籤）

更改React Native第三方元件原始碼

React Native常用第三方元件彙總見連結： http://blog.csdn.net/chichengjunma/article/details/52920137點選開啟連結有時候第三方元件從樣式上並不能如我們意願，那我們如何更改React Native第三方元件的樣式呢

react native 自定義Image實現預載入圖片及錯誤之後圖片顯示

使用自定義Image直接移步到文章結尾檢視使用需要新增的第三方庫，prop-types，新增如下 npm install --save prop-types 我們知道react native 裡面的Image元件，預載入圖片只實現了ios，android沒有。載入錯誤

React-Native Text元件重新渲染時會文字超出螢幕的問題

React-Native Text元件重新渲染時會文字超出螢幕的問題今天在開發中碰到一個很奇怪的問題就是初次渲染的時候Text元件裡的文字會正常換行，一切看起來都很和諧，但是當我滾動scrollview引起重新渲染的時候，靈異事件發生了，這個Text裡本來的兩行文字，卻詭異的變成了一行

react-native 返回元件的問題

問題描述：在react-native中，我們開發一個元件時最終返回的內容一般都是一個 View 或者 Content 元件，其餘的內容都包裹在這個元件中進行返回。直接來說，我們最終只相當於返回的一個 V

React Native常用元件Image使用

前言

Image元件的常見屬性

Image元件的介紹和使用

Image元件填充效果試驗場

Image元件模擬使用場景

Image元件綜合小專案

Image元件的常見屬性

Image元件的介紹和使用

Image元件填充效果試驗場

Image元件模擬使用場景

Image元件綜合小專案

相關推薦