标签: imagebackground

即使我可以更改屏幕方向以更新状态并重新渲染，ImageBackground 组件仍然不会更新其宽度。

我有以下代码：

<View
  onLayout={event => this.mylayoutchange(event)}
  style={{ flex: 1, backgroundColor: 'green' }}
>
  <ImageBackground
    style={{ flex: 1, width: this.state.width, height: this.state.height }}
    imageStyle={{ resizeMode: 'repeat' }}
    source={require('../assets/images/my_background.jpg')}
  >
    <View>
      <Text>.... Other code here....</Text>
    </View>
  </ImageBackground>
</View>;

当用户改变设备的方向时， mylayoutchange() 函数被调用。它正确更新状态。渲染函数将更新。宽度和高度已正确更改，如 中所示console.log()。但是，无论出于何种原因，<ImageBackground>都不会更新其正确的宽度和高度。

当屏幕旋转时，背景图像不再填满屏幕的整个尺寸，而是看到绿色背景颜色。

我究竟做错了什么？

我的环境：

"react": "16.13.1",
"react-native": "0.63.2",

在我的react-native expo应用程序中，我有一个背景图像，在所有屏幕上都具有完整的高度和宽度，我想在背景图像上方放置一个线性渐变，但它不起作用，图像总是出现在渐变上方，这里是代码：

    import React, { Component } from 'react';
    import { LinearGradeint } from 'expo';
    import { Text, StyleSheet, ImageBackground } from 'react-native';

    class App extends Component {

      render() {

        return(
          <View style={styles.container}>
          <LinearGradient
          colors={['#4c669f', '#3b5998', '#192f6a']}>
            <ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
            <View style={{width: "100%"}}>
            <Text>
              HI
            </Text>
          </View>
           </ImageBackground>
          </LinearGradient>
          </View>
        )
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
      backgroundImage: {
        height: '100%',
        width: '100%',
        flex: 1,
      },
    export default App;

我正在寻找一种在 React Native 中添加背景图像的方法，其样式与 HTML 相同：

background-size: cover;
background-position: top center;

我正在使用ImageBackground，resizeMode="cover"但图像垂直对齐到中间，我无法让它对齐到顶部。是否有一个道具可以允许在 React Native 中设置垂直对齐/位置？

resizeMode="strech"不适用于我的情况，因为背景图像包含不得扭曲的徽标。

图像尺寸为 1242 x 2436，即使在 iPhone X 上也能实现全高覆盖。徽标位于图像顶部的 1/6，并且必须始终可见，底部可以隐藏，具体取决于设备高度和方向，图像必须始终为屏幕全宽。

我正在使用React Native的ImageBackground组件。但是，无论我选择什么样式，总是会显示相同的错误消息。代码如下所示：

  render() {
return (
  <ImageBackground
    source={require('./common/Background_image.png')}
    stlye={styles.backgroundStyle}
  >
    <Text>Some text here!!</Text>
  </ImageBackground>
);

}

  backgroundStyle: {
flex: 1,
width: null,
height: null,
resizeMode: 'cover'}

此处错误的图像

React-Native 版本：react-native-cli: 2.0.1 react-native: 0.55.4

关于这可能发生什么的任何想法？

我正在使用 react native 构建一个应用程序，我想使用像这样的重复调整大小模式来实现背景图像。

        <View 
            style   = {style.container}>
            <ImageBackground 
                source={require('../../assets/images/background.png')}
                resizeMode="repeat"
                style={style.imageBackground}
                >
                    ...
            </ImageBackground>
        </View>

款式：

imageBackground: {
    width: '100%', 
    height: '100%', 
    resizeMode: 'repeat',
    justifyContent:'center'
},
container: {
    marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight + 30,
    flex: 1,
    backgroundColor: COLORS.BACKGROUND,
    justifyContent: 'center',
},

在 iOS 上它完美运行。但是当我打开Android时，它看起来像这样：

我究竟做错了什么？

我一直在努力开发下面提到的屏幕:

为此,我创建了以下组件:

import React, {Component} from 'react';
import {View, Text, StyleSheet, ImageBackground, Image} from 'react-native';
import Balance from './Balance.js'

class AccountHeader extends React.Component{
    render(){
        return(
            <ImageBackground
                source={require('../images/lawrance.jpg')}
                style={styles.container}>
                    <View style={styles.overlay}></View>
                    <Text style = {[styles.textStyle, {paddingTop: 10}]} >My Account</Text>
                    <Image source= {require('../images/lawrance.jpg')}
                        style={styles.avatarStyle}/>
                    <Text style = {styles.textStyle} > Jenifer Lawrance</Text>
                    <Text style = {styles.textStyle} > +14155552671</Text>
                    <Balance style= {styles.balanceContainer}/>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor:'red',
        opacity: 0.6
    },
    overlay: {
        backgroundColor:'transparent',
        opacity: 0.6
    },
    avatarStyle: { …

我有一个图像，我尝试将一些文本放在其中。

为此，我使用 ImageBackground 来拥有图像的子元素。

然而，图像在小型设备上被缩小，如果可能的话，全尺寸

当我将文本居中时，它会在整个图像比例之后居中（在可以看到整个图像的大屏幕上，它居中 - 在小屏幕上它的偏移量，因为某些图像被裁剪以适合。

<ImageBackground style={{ width: wp('50%'), 
                 height: hp('50%'), 
                 resizeMode: 'cover', 
                 justifyContent: 'center', 
                 alignItems: 'center' }}
                 source={require('../assets/images/12.jpg')}>

    // if the full image is showing - it's centered, otherwise not!
    <Text style={{ color: "red" }}>Centered text</Text>

</ImageBackground>