React-Native FullScreen Backaground图像

时间:2015-08-26 21:27:06

标签: javascript ios css iphone react-native

所以,我已经尝试了大约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%宽度):

flexbox not working

任何帮助都会受到赞赏,只是看不出为什么它不起作用!

1 个答案:

答案 0 :(得分:1)

resizeMode是Image组件的单独道具,它在style道具中没有效果。它还期望来自Image组件的枚举。所以你应该像这样使用它:

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