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

Question

我正在尝试在我的登录视图中设置完整的背景图片。

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

所以我像那里那样做了，但是没有用：

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。我不知道如何做到可编辑：/

谢谢:)

Answer 1

试试这两种方法之一：

第一个 与您的类似，只是您的登录表单上有 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>
    );
}

Answer 2

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

Text 组件有白色背景，我认为问题出在 Image 和东西...

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

这是完整的示例：

代码：

'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

希望对我这样的人有所帮助，当你整天写代码的时候，你的大脑并没有像你想的那样工作！

谢谢。

Answer 3

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

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

Answer 4

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

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

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

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

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

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

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

Full screen background image in React Native app

fullscreen

background-image

react-native