React-native: how to set an image in the background Layout (View)

Question

Now I set the background image using the code below, where one additional kind of image is created to set the image on top of the view and its operation.

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

Now my question is: is there a way to set the background image directly to the view, for example:

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

The above code does not work for me.

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 . sibling <View> {flex: 1, backgroundColor: 'transparent'}. sibling <View> . opacity <Image> sibling <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

Answer 5

ReactNative <Image />. <View> . , , <Image /> props <View>, , .

, ReactNative, :

• First article

• Second article

Hope my answer can give you an idea. Happy coding!