将图片调整大小以适应视图 - React Native

Question

我想知道是否有可能调整图片大小使其适合视图。

这是我现在拥有的内容

 <View style={styles.container}>
    <View style={styles.header}>
      <Image
        source={headerImage}    
      />

    </View>
    <Text style={styles.basicText}>text</Text>
  </View>

---

 const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: "#fff"
      },
      header: {
        height: 200, 
        backgroundColor: 'red'
      },
      background: {
        width: null,
        height: null
      },
      image: {

      }

我希望将图像适应于页眉视图。

- smuvv

---

你可以尝试使用resizeMode，详情请参考http://facebook.github.io/react-native/releases/0.45/docs/image.html - Jigar Shah

Answer 1

在 Moti Azu 的回答中，还需要设置 resizeMode。

image: {
  flex:1,
  height: null,
  resizeMode: 'contain',
  width: null,
}

如果看起来无法工作，请确保您的具有样式container的View具有宽度。

- Antoine Grandchamp

Answer 2

尝试以下样式

<View style={styles.container}>
  <View style={styles.header}>
    <Image  style={styles.image}
      source={headerImage}    
    />

   </View>
  <Text style={styles.basicText}>text</Text>
</View>

样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  },
  header: {
    height: 200, 
    backgroundColor: 'red'
  },
  background: {
    width: null,
    height: null
  },
  image: {
    width: 50,
    height: 50
  }
})

请参考React Native的图像属性

http://facebook.github.io/react-native/releases/0.42/docs/image.html#props

或者在图像属性中使用resizeMode

- Arunkumar

Answer 3

将flex:1添加到图像中，它将会在其容器中拉伸。

 image: {
     flex: 1
 }

- Moti Azu