image - 图像resizeMode ='contain'在React Native中不起作用

Question

这是最简单的代码:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image resizeMode={'contain'} source={imageSource}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

如果将resizeMode设置在'center'上，则其工作效果几乎与预期的一样，但是在'contain'中时，图像不会调整大小。 The image is really huge，但不会调整大小...我在哪里错了？ :)

Answer 1

您的图像没有高度和宽度的上下文。您需要指定它。

这应该可以解决您的问题:

 <Image
style={{ width: "100%", height: "100%" }}
resizeMode={"contain"}
source={imageSource}
/>;