React Native 应用程序中的全屏背景图像

Posted 2023-02-22

【中文标题】React Native 应用程序中的全屏背景图像

【英文标题】：Full screen background image in React Native app

【发布时间】：2016-05-01 17:37:10

【问题描述】：

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

我在 *** 中发现了这个问题：What's the best way to add a full screen background image in 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: 
  ,
);

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

编辑：这是应用程序，如果你们想看看 -> Full size background image example on rnplay.org。我不知道怎么做可编辑：/

谢谢:)

【问题讨论】：

用styles.loginFormstyle 将View 包裹在Image 组件内

TEST 像这样吧？它没有用：/ -> puu.sh/mIZ9k/7df9341cd6.png

【参考方案1】：

您应该使用 ImageBackground 组件。 See React Native Docs

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

【讨论】：

@WasanthaWijayaratna 我很高兴为您提供帮助！

这应该是公认的答案，因为这是专门为有问题的任务而构建的，即接受孩子

【参考方案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>
    );

【讨论】：

感谢您的回答。使用第一种方法：puu.sh/mJ1xz/dc72257192.png 使用第二种方法：puu.sh/mJ1CK/493f68bb1c.png 没有任何效果：/

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

性能怎么样？使用.png 或.jpg 可以吗？还是用别的更好？

我添加了 100% 的宽度以精确匹配。谢谢。` backgroundImage: flex: 1, resizeMode: 'cover', width: '100%', ,`

另外，我根据目前的工作进行了修改：TEST

【参考方案3】：

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

Text 组件有白色背景，我认为问题出在 Image 之类的...

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

这是完整的工作示例：

代码：

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

同样在rnplay.org

我希望它对像我这样的人有所帮助，当您整天编写代码时，您的大脑无法正常工作！

谢谢。

【讨论】：

性能如何？使用.png 或.jpg 可以吗？还是用别的更好？

您好，我收到 bilowe 错误 --> 组件不能包含子组件。如果您想在图像顶部呈现内容，请考虑使用 组件或绝对定位。

【参考方案4】：

Umesh，你的问题的答案已经说得很清楚了。

<Image /> 组件不包含任何子组件。您需要做的是使用<ImageBackground /> 组件，因为这将允许您在其中嵌入其他组件，使其成为子组件。所以在你的情况下你应该做这样的事情

<ImageBackground> <Text>Write your text and some other stuffs here...</Text> </ImageBackground>

注意：不要忘记添加flex: 1 or width。

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

【参考方案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,
        ,
 ;