p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC" }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #608b4e; background-color: #1e1e1e }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; background-color: #ffffff; min-height: 17.0px }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; background-color: #ffffff }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #9cdcfe; background-color: #1e1e1e }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #d4d4d4; background-color: #1e1e1e }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; background-color: #ffffff; min-height: 17.0px }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; background-color: #ffffff }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #ce9178; background-color: #1e1e1e }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; background-color: #ffffff; min-height: 14.0px }
span.s1 { font: 12.0px "PingFang SC" }
span.s2 { }
span.s3 { color: #808080 }
span.s4 { color: #4ec9b0 }
span.s5 { color: #d4d4d4 }
span.s6 { color: #b5cea8 }
span.s7 { color: #ce9178 }
span.s8 { color: #9cdcfe }
span.s9 { color: #569cd6 }
span.s10 { color: #dcdcaa }
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);