React Native 四：图片

最新推荐文章于 2024-08-05 21:44:36 发布

原创最新推荐文章于 2024-08-05 21:44:36 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#React Native #Image #source #require

React Native 同时被 2 个专栏收录

13 篇文章

订阅专栏

手把手教导React-Native

12 篇文章

订阅专栏

本文介绍了在React Native中如何使用Image组件展示不同类型的图片资源，包括静态资源、混合资源和网络资源。通过示例代码展示了如何引用本地图片、动态选择图片以及加载网络图片的方法，并给出了实际运行的效果。

一、展示图片资源

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.运行效果如下：