React Native 学习笔记十五（图片的使用）

从0.14版本之后 RN推出了 android 和ios共同管理图片资源 

1.静态资源图片的使用

在项目中添加一个文件夹  将图片资源放在文件夹中 然后 调用即可  （在图片命名的时候可以使用@2x 和@3x这种文件后缀 ）

├── button.js
└── img
    ├── check@2x.png
    └── check@3x.png

package会打包所有图片  根据屏幕尺寸选择最适合的图片 ‘

选择使用方法  

var icon =this.props.active?require('./img/a.jpg'):require('./img/b.jpg');

<Image source={icon}/>

2.混合app图片

如果你在编写一个混合App（一部分UI使用React Native，而另一部分使用平台原生代码），也可以使用已经打包到App中的图片资源（通过Xcode的asset类目或者Android的drawable文件夹打包）：这种做法 我还没有测试过 但是 需要指定尺寸

 <Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

3.网络图片的获取

根据uri获取网络图片 与获取静态图片感觉很像 但是 网络图片需要自己制定图片大小 (不指定款高也不会报错 能够正常显示图片)

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
style={{width: 400, height: 400}} />

4.背景图片的设置 

render() {
    return (
        <Image source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}style={styles.baseStyle}>
        <View style={styles.contentStyle}>
            <TouchableOpacity onPress={this._pressButton.bind(this)}
                              style={{flexDirection:'row' ,alignItems: 'center'}}>
                <Text style={styles.red}>点我跳转</Text>
            </TouchableOpacity>
        </View>
            </Image>
    );
}

直接设置背景为<Image> 添加图片 以及对应属性即可