加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React Native 四:图片

发布时间:2020-12-15 03:35:06 所属栏目:百科 来源:网络整理
导读:一、展示图片资源 1.在ReactNative中,图片使用Image组件进行展示,下面我们就以静态、混合和网络资源等多种方式演示图片展示; 2.将图片放在代码文件夹img处; 3.编辑index.android.js文件,像如下方式引用它; Index.android.js文件 import React,{ … …
一、展示图片资源
1.在ReactNative中,图片使用Image组件进行展示,下面我们就以静态、混合和网络资源等多种方式演示图片展示;
2.将图片放在代码文件夹img处;

3.编辑index.android.js文件,像如下方式引用它;
Index.android.js文件
import React,{
    … …   
} from 'react-native';
class AwesomeProject extends Component {
  render() {
    var icon = false ? require('./img/my-icon-active.png') : require('./img/my-icon-inactive.png');
 // 错误
 //var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
    return (
      <View>
        //静态资源
        <Image style={styles.img} source={require('./img/my-icon-active.png')}/>
        <Image style={styles.img} source={icon} />
  //错误:require中的图片名字必须是一个静态字符
  //<Image source={require('./' + icon + '.png')} />

  //混合资源,使用已将打包到App中的图片资源
        <Image style={styles.img} source={{uri:'my-icon-active.png'}} />

  //网络资源,需要手动的指定图片的尺寸
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
               style={{width: 400,height: 400}} />
      </View>
    );
  }
}
var styles = StyleSheet.create({
  img:{
    … … 
  },});
AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);
4.运行效果如下:


(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读