React-native：如何在布局（视图）的背景中设置图像

Posted 2023-02-22

【中文标题】React-native：如何在布局（视图）的背景中设置图像

【英文标题】：React-native: How to set image in background of Layout(View)

【发布时间】：2017-10-16 15:43:41

【问题描述】：

现在我正在使用下面的代码设置背景图像，其中创建一个额外的图像视图来设置图像视图并且它工作正常。

<View>
<Image 
  style=
     height:67 ,
     width: width 
  source=Images.header_bachkground/>
</View>

现在我的问题是：有没有办法直接在视图上设置背景图像：

<View 
  style=
     height:67 ,
     width: width 
  source=Images.header_bachkground>
</View>

上面的代码对我不起作用。

【参考方案1】：

不推荐使用<Image /> 作为父组件来嵌套子组件，并且很快就会抛出错误（在撰写本文时）。请改用<ImageBackground />。您可以在 ImageBackground 中嵌套任何内容。你可以传递给<Image />的所有道具都可以传递给这个。

请参考this。

【讨论】：

resizeMode 应该在 imageStyle 属性中传递

【参考方案2】：

对此有两种方法。一种是将所有内容放在开始和结束<Image> 标签之间。另一种是使用布局属性。参考这个链接：https://medium.com/reactnative/background-images-in-react-native-191f3ed95a45

第一种方式是使用<Image>作为容器。将您的内容放在<Image> 和</Image> 之间。一定要设置内容的backgroundColor: 'transparent'。我认为android默认提供它，但iPhone没有。因此，为了保持一致性，我们需要明确声明它。 React Native 会警告你这样做。它很快就会变成一个错误。所以，我推荐后一种方式。

const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png';

export default class BackgroundImage extends Component 
  render() 
    const resizeMode = 'center';
    const text = 'This is some text inlaid in an <Image />';

    return (
      <Image
        style=
          backgroundColor: '#ccc',
          flex: 1,
          resizeMode,
          position: 'absolute',
          width: '100%',
          height: '100%',
          justifyContent: 'center',
        
        source= uri: remote 
      >
        <Text
          style=
            backgroundColor: 'transparent',
            textAlign: 'center',
            fontSize: 30,
            padding: 40,
          
        >
          text
        </Text>
      </Image>
    );
  

第二种方法是使用布局属性。在容器中获取<View> 并设置position:'absolute', width: '100%', height: '100%'。在这个<View> 中插入<Image> 并设置flex: 1。您可能还想添加resizeMode。现在在同一个容器中写一个兄弟<View> 并设置flex: 1, backgroundColor: 'transparent'。在这个兄弟<View> 中放置您的内容。您可能希望为<Image> 或兄弟<View> 设置opacity。

示例如下：

const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png';

export default class BackgroundImage extends Component 
  render() 
    const resizeMode = 'center';
    const text = 'I am some centered text';

    return (
      <View
        style=
          flex: 1,
          backgroundColor: '#eee',
        
      >
        <View
          style=
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          
        >
          <Image
            style=
              flex: 1,
              resizeMode,
            
            source= uri: remote 
          />
        </View>
        <View
          style=
            flex: 1,
            backgroundColor: 'transparent',
            justifyContent: 'center',
          
        >
          <Text
            style=
              textAlign: 'center',
              fontSize: 40,
            
          >
            text
          </Text>
        </View>
      </View>
    );
  

【讨论】：

您能否将链接文档的精髓添加到您的答案中。这有助于找到答案，并确保在链接文档移动到另一个 URL 时它不会丢失。

嗨@Markus，我添加了精髓。检查一下。

【参考方案3】：

如下构造你的代码：

...
    <Image
    source=require('./images/index.jpeg')
    style=styles.container>
    <View>
    <Text>
      Welcome to React Native Maulik !
    </Text>
    <Text style=styles.instructions>
      To get started, edit index.ios.js
    </Text>
    <Text>
      Press Cmd+R to reload,'\n'
      Cmd+D or shake for dev menu
    </Text>
    </View>
  </Image>
... 

你的风格应该像下面这样：

const styles = StyleSheet.create(
container: 
flex: 1,
width: undefined,
height: undefined,
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
  ,
);

【参考方案4】：

您不能将图像背景设置为视图。尝试将<Image> 添加为所有内容视图的父级，如下所示

 <Image source=require('image!background') style=styles.container>
    ... Your Content ...
  </Image>

参考这个SO thread

【参考方案5】：

我认为在 ReactNative 中用于管理图像和其他媒体使用组件 <Image />。我在文档组件中读到 <View> 旨在构建 UI。但是，也许如果您将组件<Image /> 用作组件props 中的props，我认为这是可能的。

或者如果你想了解 ReactNative 中的背景图片，我建议你阅读这篇文章：

First Article

Second Article

希望我的回答能给你一个想法。快乐编码！

【参考方案6】：

这是最简单也是最受青睐的方法！

 <ImageBackground
     source=require("../Assets/splash.png")
      style=width: '100%',opacity:0.95, height: '100%',justifyContent:"center",alignContent:"center",alignItems: "center"
    > 

                <View style=styles.InfoText>
                <Text style= textAlign: "center",color:'white', letterSpacing: 1.0, 
        lineHeight: 15  > Hello user.email,</Text>
    </View>
    </ImageBackground>

这一定可以解决问题。不要忘记从应用顶部的 react native 导入图像背景！

这是 react native 的新增功能！