Question

我试图在我的应用中添加背景图片，并且我知道使用以下风格的传统方式：

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

但我的应用程序有点复杂，我需要在背景上有一个弹性容器来正确显示我的信息（比如在背景图像上添加另一个图像）。因此，我似乎无法正确地做到这一点。这是我的屏幕代码：

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

哪里＆＃34;容器＆＃34;是

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

您可以尝试这种方式。如果在视图中放入了任何文本或按钮。

React Native //背景图片上面有灵活容器吗？

1 个答案: