React Native require() 网络与静态图像调整大小

Question

怎么用网络图片，

<View style={{flex: 1, alignItems: 'stretch'}}>
          <Image
           style={{flex: 1}}
           source={{uri: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'}} />
</View>

它填满了页面：

但是当我对静态图像使用 require() 时：

<View style={{flex: 1, alignItems: 'stretch'}}>
 <Image
  style={{flex: 1}}
  source={require('./googlelogo.png')} />
</View>

不是吗？

运行反应本机 0.37.0。此代码直接添加到新的 react-native init-ed 项目中，没有第 3 方库或任何东西。

Answer 1

您可能遇到了与相同的问题。

尝试将图像的宽度设置为 null:

<Image
  style={{flex: 1, width: null}}
  source={require('./googlelogo.png')} />

React Native require() 网络与静态图像调整大小

React Native require() network vs. static image resize

image

require

react-native

react-native-flexbox