React Native Image多種加載圖片方式
React-Native Image加載圖片方式解析
1.加載當前工程文件夾下圖片
<Image style={styles.image} source={require(‘./TT2.jpg‘)} />
2.加載當前應用沙盒文件內圖片
分析：
假定圖片存儲在document文件夾下（document/TT1.jpg）
理論上這個加載方式和第一種默認似乎一樣（都是路徑），
實際上require裏面的參數只能是工程文件夾內部的圖片，並且參數不能是變量。
（require(this.state.localPath) 這種是錯誤的）
正確方式：
用 uri，這裏就需要在js文件中獲取當前應用的沙盒路徑（document路徑），
於是我就天真的開始尋找js如何獲取app的沙盒路徑，然並卵。。。。。。
恍然大悟：React-Native並非萬能，也無法完全取代原生，這就是我的一個學習誤區，
實際上開發過程中需要兩者相輔相成
實現邏輯如下：
1.創建OC類，MDHFileManager並與js文件實現數據傳遞
2.MDHFileManager: 負責獲取圖片沙盒路徑，並callback給js文件
3.js：收到OC類的回調後，更新state中參數（state參數改變，對應Image組件就會刷新）
this.state.ok 來處理placeholderImage
<Image style = {{width: 300, height: 200, backgroundColor:‘white‘}}
source = {this.state.ok ? {uri: this.state.localImagePath} : require(‘./TT4.jpg‘)}
resizeMode = {‘contain‘}/>
3.加載網絡圖片（不過多贅述）
<Image style = {{width: 300, height: 300, backgroundColor:‘white‘}}
source = {{uri: ‘http://facebook.github.io/react/img/logo_og.png‘}}
resizeMode = {‘contain‘}
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */
import React, { Component } from ‘react‘; import { AppRegistry, StyleSheet, Text, Image, View, NativeModules } from ‘react-native‘;
var FileManager = NativeModules.MDHFileManager
export default class SS extends Component {
constructor(props) { console.log(‘ 1111111**********++++++++++ constructor‘); super(props); this.state = { ‘localImagePath‘ : ‘‘, ‘ok‘:false } } componentWillMount() {
/** * 此函數調用時機是在組件創建，並初始化了狀態之後，在第一次繪制render()之前 * 可以在這裏做一些業務初始化操作，也可以設置組件狀態，整個生命周期中只被調用一次 */ console.log(‘222222++++++++++ componentWillMount‘); FileManager.imageLocalPathCallBack((path)=>{ console.log(‘ **********++++++++++ path‘ + path); this.setState({ ‘localImagePath‘:path, ‘ok‘:true }) }) }
componentDidMount() { console.log(‘44444++++++++++ componentDidMount‘); /** * 在組件第一次繪制後，會調用，通知組件以及加載完成。 */ }
render() { console.log(‘33333**********++++++++++ render‘ ); return ( <View style={styles.container}> <View style = {{width: 300, height: 300, backgroundColor:‘white‘}}> <Image style = {{width: 300, height: 200, backgroundColor:‘white‘}} source = {this.state.ok ? {uri: this.state.localImagePath} : require(‘./TT4.jpg‘)} resizeMode = {‘contain‘}/> <Text style={styles.welcome}>加載document目錄下圖片</Text> </View> <View style = {{width: 300, height: 300, backgroundColor:‘white‘}}> <Image style = {{width: 300, height: 200}} source = {require(‘./TT2.jpg‘)} resizeMode = {‘contain‘} /> <Text style={styles.welcome}>加載工程文件夾下的圖片</Text> </View> <View style = {{width: 300, height: 300, backgroundColor:‘white‘}}> <Image style = {{width: 300, height: 300, backgroundColor:‘white‘}} source = {{uri: ‘http://facebook.github.io/react/img/logo_og.png‘}} resizeMode = {‘contain‘} /> <Text style={styles.welcome}>加載網絡圖片</Text> </View> </View> ); } }
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: ‘center‘, alignItems: ‘center‘, backgroundColor: ‘#F5FCFF‘, }, welcome: { fontSize: 20, textAlign: ‘center‘, margin: 10, color:‘red‘ }, instructions: { textAlign: ‘center‘, color: ‘#333333‘, marginBottom: 5, }, });
AppRegistry.registerComponent(‘SS‘, () => SS);
React Native Image多種加載圖片方式