用flex容器在Native //背景图像上反应吗？

Question

I'm trying to add a background image to my app, and I know the traditional way of doing it with the following style:

animatedBackground: {
    alignItems: 'center',
    resizeMode: 'stretch',
    width: null
},

But my app is a little more complex, and I need to have a flex container over the background to display my information correctly (like adding another image over the background image). Therefore, I can't seem to be able to properly do this. This is my code for the screen:

render() {
    return (


        <View style = {styles.container}>

        <Image
            source={require('../images/background.gif')}
            style={styles.animatedBackground} />


            <Image
            source={require('../images/trophy.png')}
            style={{width: 280, alignItems: 'center', height: 280}}
            />

            <Text style={styles.welcome}>
            BreakFree
            </Text>

            <View style = {{flexDirection: 'row'}}>
                <Button onPress = { this.login } style ={styles.tapToStart}>
                    Login
                </Button>

                <Button onPress = { this.signupUser } style ={styles.tapToStart}>
                    Signup
                </Button>
            </View>


        </View>
    );
}

Where "container" is

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#58C2E9',
},

Answer 1

import React from 'react';

import {Dimensions, Image, ImageBackground, Text, TouchableOpacity, View} from 'react-native';

const {width, height} = Dimensions.get('window')

render() {
    return (
        <ImageBackground source={require('../path/background_image.png')} style={{
            width: width,
            height: height,
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
        }}>


            <Image source={require('../path/logo.png')} resizeMode={'contain'}/>

        </ImageBackground>
    );
}

you can try this way. if any text or button put in View.