React Native // 带有 flex 容器的背景图像？

Posted 2023-02-23

【中文标题】React Native // 带有 flex 容器的背景图像？

【英文标题】：React Native // Background Image with flex container over it?

【发布时间】：2017-08-21 20:53:46

【问题描述】：

我正在尝试向我的应用程序添加背景图片，并且我知道使用以下样式的传统方式：

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',
,

【问题讨论】：

使用组件镜像作为容器是什么意思？如果这就是你的意思，也许你可以关注this 文章。

【参考方案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>
    );

你可以试试这个方法。 如果有任何文本或按钮放在视图中。