React-Native 全屏背景图片

Question

所以，我已经尝试了大约 4 天，但我似乎无法让图像表现得像在 flexbox 中应该表现的那样，尤其是在 cover resizeMode 下。

我的代码是：

var Creator = React.createClass({
  render: function() {
  return (
    <View style={ styles.container }>
      <Image source={ require('image!createBg') } style={ styles.image }></Image>
    </View>
  );
 }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    resizeMode: 'cover'
  }
});

并输出以下内容（图像被大幅拉伸而不是 100% 宽度）：

任何帮助将不胜感激，只是不明白为什么它不起作用！

Answer 1

resizeMode 是 Image 组件的一个单独的属性，它在 style 属性中没有作用。它还需要来自 Image 组件的枚举。所以你应该像这样使用它：

<Image
 source={require('image!createBg')}
 style={styles.image}
 resizeMode={Image.resizeMode.contain} />

React-Native 全屏背景图片

React-Native FullScreen Backaground Image

javascript

css

iphone

ios

react-native