Background image React本机应用程序中的全屏背景图像

我正在尝试在登录视图上设置完整的背景图像

我在Stackoverflow中发现了这个问题：

所以我就这样做了，但没有成功：

var login=React.createClass({
render:function（）{
返回(
试验
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
},
背景图片：{
弹性：1，
resizeMode:'cover'、//或'stretch'
},
登录信息：{
},
});

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

编辑：这是应用程序，以防你们想看一下->。我不知道怎么做：/

---

谢谢：）

尝试以下两种方法之一：

第一个与您的类似，只是您的登录表单上有

位置：“绝对”

：

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>
    );
}

render:function（）{
返回(
试验
);
}

我犯了一个愚蠢的错误

文本组件有白色背景，我认为问题出在图像和其他东西上

因此，解决方案是像@Cherniv和@kamikazeOvrld所说的那样，将信息包装在Image标记中，但也为其中的组件设置透明背景

下面是一个完全有效的示例：

代码：

“严格使用”；
var React=require（'React-native'）；
变量{
评估学，
样式表，
文本，
看法
形象,，
StatusBarIOS
}=反应；
StatusBarIOS.setHidden（true）；
var SampleApp=React.createClass({
render:function（）{
返回(
一些文本
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
},
背景图片：{
弹性：1，
resizeMode:'覆盖'，//或'拉伸'，
为内容辩护：“中心”，
},
登录信息：{
背景色：“透明”，
对齐项目：“居中”，
},
正文：{
尺寸：30，
fontWeight:'粗体'，
}
});
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；

也在

我希望它能帮助像我这样的人，当你整天都在写代码时，你的大脑并没有像你希望的那样工作

---

谢谢

您应该使用ImageBackground组件

在…内

Umesh，您的问题的答案已经清楚地说明了

组件不包含任何子组件。您需要做的是使用

组件，因为这将允许您将其他组件嵌入其中，使它们成为子组件。所以在你的情况下，你应该这样做

在这里写下你的文字和其他东西。。。

注意：不要忘记添加

flex:1或width

我希望我的回答足够清楚。 谢谢。

{this.setModalVisible（！this.state.visible）}>
接近
const styles=StyleSheet.create({
图像取消：{
高度：“自动”，
宽度：“自动”，
辩护内容：'中心'，
背景颜色：'#000000'，
对齐项目：“柔性端”，
},
text取消：{
paddingTop:25，
paddingRight:25，
尺码：18，
颜色：“ffffff”，
身高：50，
},
}};

---

将

视图

用

样式包装。在
图像
组件测试中使用loginForm

样式，对吗？它不起作用：/->谢谢你的回答。第一种方法：第二种方法：不起作用：/@JVLobo我看到了y你终于成功了，如果答案对你有效，请标记为接受。性能如何？使用

.png

或

.jpg

可以吗？还是使用其他方法更好？性能如何？使用

.png

或

.jpg

可以吗？还是使用其他方法更好？你好，我收到了bilowe错误-->comPoNoT不能包含儿童。如果你想在图像的顶部渲染内容，请考虑使用组件或绝对定位。@ WasthaWijayaRaTNA我很乐意帮助！这应该是可接受的答案，因为这是专门为所讨论的任务而建的，即接受儿童。

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>
    );
}

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  StatusBarIOS
} = React;

StatusBarIOS.setHidden(true);

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={ styles.container }>
        <Image source={{uri: 'http://puu.sh/mJ1ZP/6f167c37e5.png'}} style={styles.backgroundImage} >
          <View style={ styles.loginForm }>
            <Text style={ styles.text }>Some text</Text>
          </View>
        </Image>
      </View>
    );
  }
});

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

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

  loginForm: {
    backgroundColor: 'transparent',
    alignItems: 'center',
  },

  text: {
    fontSize: 30,
    fontWeight: 'bold',
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

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

 <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,
        },
 }};