Question

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

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

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

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

以上代码对我不起作用。

Answer 1

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

参考this。

Answer 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>中放置您的内容。您可能需要为opacity或同级<Image>设置<View>。

以下是示例：

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

Answer 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',
  },
});

Answer 4

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

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

请参阅此SO thread

Answer 5

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

或者如果您想了解ReactNative中的背景图片，我建议您阅读本文：

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

Answer 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：如何在Layout（View）的背景中设置图像

6 个答案: