【原创】东方耀reactnative 视频19之-图片image组件

调用图片路径很多，网络图片，本地图片，照相机图片

Image组件的属性

resizeMode:
图片适用的模式cover ,contain, stretch
source：
静态图片资源
网络图片 source={{uri:’http://www.baidu.com/1.png‘}}
本地图片: source +{require{(./baidu.png’)}

/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
‘use strict’;

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
PixelRatio,
Text,
Image,
TouchableOpacity,
View
} from ‘react-native’;

var imgs=[
‘https://www.baidu.com/img/bd_logo1.png‘,
‘https://gss1.bdstatic.com/5eN1dDebRNRTm2_p8IuM_a/res/img/xiaoman2016_24.png‘,
‘http://bbs.izengzhi.com/template/qing/image/izengzhi.png’
];

class demo2 extends Component {
render() {

return (

    <View style={[styles.flex,{marginTop:45}]}>


        <MyImage imgs={imgs}> </MyImage>

    </View>

);

}

}

class MyImage extends Component{
constructor(props){
super(props);
this.state = {
count:0,
imgs:this.props.imgs,
};
}

//source={{uri:this.state.imgs[this.state.count]}}  网络图片

//source={require('./xiaoman2016_24.png')}   本地图片
render(){

    return(
        <View style={[styles.flex,{alignItems:'center'}]}>

            <View style={styles.image}>

                <Image style={styles.img}
                    resizeMode="contain"
                      // source={{uri:this.state.imgs[this.state.count]}}
                        source ={require('./baidu.png')}
                    />

            </View>


            <View style={styles.btns}>


                <TouchableOpacity onPress={this.goPreview.bind(this)}><View style={styles.btn}><Text>上一张</Text></View></TouchableOpacity>

                <TouchableOpacity onPress={this.goNext.bind(this)}><View style={styles.btn}><Text>下一张</Text></View></TouchableOpacity>

            </View>


        </View>
    );
}


goPreview(){
    var count=this.state.count;
    count--;
    if(count>=0){
        this.setState({
            count:count,
        });
    }
}

goNext(){
    var count=this.state.count;
    count++;
    if(count<this.state.imgs.length){
        this.setState({
            count:count,
        });
    }
}

}

const styles = StyleSheet.create({

btn:{
    width:60,
    height:30,
    borderColor:'#0089FF',
    borderWidth:1,
    justifyContent:'center',
    alignItems:'center',
    borderRadius:3,
    marginRight:20,

},

btns:{
    flexDirection:'row',
    marginTop:20,
    justifyContent:'center',
},


img:{
    height:150,
    width:200,
},


image:{
  borderWidth:1,
    width:300,
    height:200,
    borderRadius:5,
    borderColor:'#ccc',
    justifyContent:'center',
    alignItems:'center',
},

flex:{
flex:1,
},

});

AppRegistry.registerComponent(‘demo2’, () => demo2);

>
注意：
图片和js代码处在相同文件目录下，组件可以包含自己所用的图片而不用单独去设置
不要全局命名，不用再担心图片名字冲突问题
只有实际用到（被require)的图片才会被打包到app
为了使新的图片资源机制正常工作，require中的图片名字必是一个静态字符串

使用混合app的图片资源

可以使用已经打包到app中的图片资源（通过xcode的asset类目或android的drawable文件目录打包）