react-native image 设置默认图片
Image组件的引入图片提供了下面这几种类型:静态图片资源,网络图片资源静态资源引用方式:<Image>source={require('./bunny.png')}style={styles.base}</Image>网络图片资源<Imagesou
·
Image组件的引入图片提供了下面这几种类型:静态图片资源,网络图片资源
静态资源引用方式:
<Image>
source={require('./bunny.png')}
style={styles.base}
</Image>
网络图片资源
<Image
source={{uri: 'https://facebook.github.io/origami/public/images/birds.jpg'}}
style={styles.base}>
</Image>
默认图片
<Image
defaultSource={require('./bunny.png')} //默认图片
source={{uri: 'https://facebook.github.io/origami/public/images/birds.jpg'}}
style={styles.base}>
</Image>
注意事项:
- 图片上添加文字
<Image
defaultSource={require('./bunny.png')} //默认图片
source={{uri: 'https://facebook.github.io/origami/public/images/birds.jpg'}}
style={styles.base}>
<Text>文字</Text>
</Image>
- 想添加背景图片
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
- 图片无法显示
第一:检查是否资源请求正确,比如网络资源使用{uri}注意加上{},本地资源require没有{}
第二:检查是否有设置宽高,没有设置是不会显示滴哦~
ps:觉得还有那么一点点帮助,请在右上方点个赞,给予一下心灵安慰哈哈哈~
ps:觉得还有那么一点点帮助,请在右上方点个赞,给予一下心灵安慰哈哈哈~
ps:觉得还有那么一点点帮助,请在右上方点个赞,给予一下心灵安慰哈哈哈~
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)