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.运行效果如下: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |