底部标签栏导航覆盖和隐藏背景图像。图像被酒吧切割

Question

应用程序是用react-native和expo开发的

我有这个简单的布局和结构： 带有底部标签栏导航的导航器 js 文件，指向页面，并导入到 App.js

问题是选项卡导航器覆盖了背景图像， 像这样：

全图是这样的：

我希望它贴在底部，但不是在底部导航栏的“后面”，而是在它的顶部， 所以你可以看到图像的底部。

我尝试将图像向上移动一点，使其位于栏上方，例如“bottom：50”或“marginBottom：50”，但它被剪掉了！ 像这样：

我尝试了很多东西， 改变位置，高度，宽度，弹性， 将背景图像组件放入容器中，并调整样式和定位， 使用标签栏导航器的一些选项， 但没有任何效果。

这里是代码：

App.js：

import 'react-native-gesture-handler';
import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import MainContainer_Test from './screens/MainContainer_Test';

function App() {

  return( 
    <MainContainer_Test/>
  )
}
export default App;

MainContainer_Test.js：

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from "@react-navigation/native";

const Tab = createBottomTabNavigator();

import Settings from './Settings1';
import TestPage1 from './TestPage1';

export default function MainContainer_Test() {
  return (
    <NavigationContainer>
        <Tab.Navigator>
        <Tab.Screen name="Settings" component={Settings} />
        <Tab.Screen name="Test Page" component={TestPage1} />
        </Tab.Navigator>
    </NavigationContainer>
  );
}

Test_Page.js：

import * as React from 'react';
import { View, Text, Button, TouchableOpacity, ImageBackground, StyleSheet, } from 'react-native';


export default function TestPage1() {

    return (
        <View style={styles.body}>
            <ImageBackground
            source={{uri: 'imageuri/image.png'}}
            style={styles.IMG}>
                <View>
                    <Text>
                        Hey
                    </Text>
                </View>
            </ImageBackground>
        </View>
    );

};

const styles = StyleSheet.create({

    body: {
        position: 'absolute',
        height: '100%',
        width: '100%',
    },

    IMG: {
        height: '100%',
        width: '100%',
        bottom: 100,

    },

}) 

寻找解决方案，但找不到。 谢谢。

Answer 1

No need to of position absolute in this conatiner just flex property works for you. if there you can also use 
resizeMode = 'cover'

            <View style={{flex:1}}>
                <ImageBackground
                source={{uri: 'https://w0.peakpx.com/wallpaper/960/845/HD- 
                   wallpaper-nature-landscape-landscape-nature-thumbnail.jpg'}}
                style={{flex:1}}
              resizeMode="cover"
                >
                    <View>
                        <Text>
                            Hey
                        </Text>
                    </View>
                </ImageBackground>
            </View>

Answer 2

不幸的是，ravin kumar 建议的方法（使用 felxes 和 resizeModes）没有用。

我找到了另一种解决方案，这不是我猜的最佳实践，但它是我发现的唯一实现我目标的方法。可以在这里找到：Solution

基本上只是给标签栏一个带有

position: 'absolute'

的样式，让它“漂浮”在背景之上

在这种方式下，它不会剪切背景图像，然后可以将背景图像向上移动到底栏上方，并且可以工作。

<Tab.Navigator
            initialRouteName={home}
            screenOptions={({route}) => ({
                tabBarActiveTintColor: "white",
                tabBarInactiveTintColor: "gray",
                

                // Bottom Tabs
                tabBarStyle: [{
                    backgroundColor: 'black',
                    height: barHeight,
                    display: "flex",
                    position: 'absolute',
                    left: 0,
                    right: 0,
                    bottom: 0,