React Native应用中的全屏背景图片

Question

我试图在登录界面上设置一张全屏背景图片。

我在Stackoverflow上找到了这个问题：React Native中添加全屏背景图片的最佳方法是什么 所以我像那里的例子一样做了，但它没有生效。

var login = React.createClass({
  render: function() {
    return (
      <View style={ styles.container }>
        <Image source={require('../images/login_background.png')} style={styles.backgroundImage} />
        <View style={ styles.loginForm }>
          <Text>TEST</Text>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  },

  loginForm: {
  },
});

我不知道我做错了什么。任何帮助将不胜感激。

编辑：这是应用程序，如果你们想看一下 -> rnplay.org上全尺寸背景图像示例。我不知道如何使它可编辑 :/

谢谢 :)

- JV Lobo

---

将 View 用 styles.loginForm 样式包裹在 Image 组件内。 - Ivan Chernykh

<View style={ styles.container }> <Image source={require('../images/login_background.png')} style={styles.backgroundImage} > <View style={ styles.loginForm }> <Text>测试</Text> </View> </Image> </View>就像这样，对吧？它没起作用 :/ -> http://puu.sh/mIZ9k/7df9341cd6.png - JV Lobo

Answer 1

你应该使用ImageBackground组件。 查看React Native文档

<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
</ImageBackground>

- Peretz30

---

@WasanthaWijayaratna 我很高兴能帮忙! - Peretz30

这应该是被接受的答案，因为它是专门为所提出的任务构建的，即接受子元素。 - CatalinBerta

Answer 2

尝试这两种方法之一：

第一种与您的方法类似，只是登录表单上有position: 'absolute'：

var styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    backgroundImage: {
        flex: 1,
        resizeMode: 'cover', // or 'stretch'
    },
    loginForm: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    },
});

第二种方法涉及使用 ImageView 作为容器：

render: function() {
    return (
        <View style={ styles.container }>
            <Image source={require('../images/login_background.png')} style={styles.backgroundImage}>
                <View style={ styles.loginForm }>
                    <Text>TEST</Text>
                </View>
            </Image>
        </View>
    );
}

- kamikazeOvrld

---

感谢您的回答。使用第一种方法：http://puu.sh/mJ1xz/dc72257192.png使用第二种方法：http://puu.sh/mJ1CK/493f68bb1c.png什么都没用 :/ - JV Lobo

@JVLobo 我看到你终于让它工作了，如果这个答案对你有用，请标记为已接受。 - kamikazeOvrld

性能如何？使用.png或.jpg可以吗？还是最好使用其他格式？ - Green

我已经将宽度添加到100％以实现精确适配。谢谢。backgroundImage：{ flex：1， resizeMode：'cover'， width：'100％'， }， - Srithar Rajendran

此外，我根据当前的工作进行了修改：<View style={styles.container}> <Image source={backgroundImage} style={styles.backgroundImage} /> <View style={styles.topContainer}> <Text>测试</Text> </View> </View> - Srithar Rajendran

Answer 3

我犯了一个愚蠢的错误...

- JV Lobo

---

性能如何？使用.png或.jpg可以吗？还是最好使用其他格式？ - Green

你好，我遇到了以下错误 --> <Image> 组件不能包含子元素。如果您想在图像上方呈现内容，请考虑使用 <ImageBackground> 组件或绝对定位。 - Umesh AHIR

Answer 4

Umesh，你的问题的答案已经清晰地说明了。 组件不包含任何子组件。您需要使用组件，因为它允许您嵌入其他组件并将它们作为子组件。所以在您的情况下，您应该这样做： 注意：不要忘记添加flex: 1或width。

希望我的回答足够清晰易懂。 谢谢。

- SirPhemmiey

Answer 5

 <View style={styles.imageCancel}>
         <TouchableOpacity onPress={() => { this.setModalVisible(!this.state.visible) }}>
                 <Text style={styles.textCancel} >Close</Text>
          </TouchableOpacity>
    </View>
const styles = StyleSheet.create({
 imageCancel: {
         height: 'auto',
         width: 'auto',
         justifyContent:'center',
         backgroundColor: '#000000',
         alignItems: 'flex-end',
    },
     textCancel: {
        paddingTop:25,
        paddingRight:25,
        fontSize : 18,
        color : "#ffffff",
        height: 50,
        },
 }};

- Keshav Gera