用flex容器在Native //背景圖像上反應嗎？

Question

我正在嘗試將背景圖片添加到我的應用中，並且我知道使用以下樣式的傳統方式：

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

但是我的應用程序稍微復雜一點，我需要在背景上有一個flex容器才能正確顯示我的信息（例如在背景圖像上添加另一個圖像）。 因此，我似乎無法正確執行此操作。 這是我的屏幕代碼：

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

“容器”在哪里

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

您可以嘗試這種方式。 如果在視圖中放入任何文本或按鈕。