React-Native Image加載圖片方式解析react
1.加載當前工程文件夾下圖片git
<Image style={styles.image} source={require('./TT2.jpg')} />github
2.加載當前應用沙盒文件內圖片web
分析：react-native
假定圖片存儲在document文件夾下（document/TT1.jpg）網絡
理論上這個加載方式和第一種默認彷佛同樣（都是路徑），app
實際上require裏面的參數只能是工程文件夾內部的圖片，而且參數不能是變量。函數
（require(this.state.localPath) 這種是錯誤的）學習
正確方式：flex
用 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);