Scrollview нажимает вниз при абсолютном позиционировании ⇐ Android

[Anonymous]

Код имеет прокрутку карточек компонентов и абсолютно позиционированную нижнюю панель навигации. Когда содержимое прокрутки увеличивается, оно должно располагаться ниже панели навигации и должно иметь возможность прокрутки, но представление прокрутки сдвигает панель навигации. Пожалуйста, исправьте этот код.
Изображения:
До и после изменения компонентов


[img]https://i. stack.imgur.com/tXyN1.png[/img]

import React, { useState, useEffect } from 'react';
import { Text, View, ScrollView, StyleSheet, Image, TouchableOpacity, Alert, SafeAreaView, ActivityIndicator } from 'react-native';
import { useRoute } from '@react-navigation/native';
import { getName } from '../firebaseConnect';
import { useFonts, Montserrat_400Regular, Montserrat_700Bold } from '@expo-google-fonts/montserrat';
import { StatusBar, Platform } from 'react-native';
import HomeScreenCard from '../Components/HomeScreenCard';
import complainImage from '../assets/ComplainLogo.png';
import QueryLogo from '../assets/QueryLogo.png';
import ProfileLogo from '../assets/ProfileLogo.png';

const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight : 20;

function WelcomeScreen() {

function triggerNewComplaint() {
Alert.alert("Register New Complaint Logic"); //Create New Complaint Logic
}
function triggerNewQuery() {
Alert.alert("Register New Query Logic"); //Create New Query Logic
}

const route = useRoute();
const userId = route.params.userId;
const [userName, setUserName] = useState(null);

let [fontsLoaded] = useFonts({
Montserrat_400Regular,
Montserrat_700Bold,
});

const [loading, setLoading] = useState(true);

useEffect(() => {
const fetchUserName = async () => {
try {
const name = await getName(userId);
setUserName(name);
// Simulate loading for a few seconds
setTimeout(() => setLoading(false), 2000); // 3000 milliseconds = 3 seconds
} catch (error) {
console.error('Error fetching user name:', error);
}
};
fetchUserName();
}, [userId]);

if (!fontsLoaded || loading) {
return (



); // Needs a loading screen
} else {
return (



Welcome, {userName || 'loading...'}.
























);
}

}

const styles = StyleSheet.create({
container: {
flexGrow: 1,
backgroundColor: '#483670',
alignItems: 'center',
paddingTop: statusBarHeight,
},
WelcomeTextWrapperContainer: {
alignSelf: "flex-start",
padding: 10,
width: '100%',
alignItems: 'center',
},
WelcomeTextWrapper: {
backgroundColor: '#222222',
borderRadius: 20,
alignItems: 'center',
width: '100%',
marginBottom: 10,
},
WelcomeText: {
fontFamily: 'Montserrat_700Bold',
color: 'white',
fontSize: 30,
textAlign: 'center',
},
MainPageContainer: {
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
backgroundColor: '#e9e4f5',
},
resizeComplainLogo: {
width: 50,
height: 50,
padding: 5,
},
NavigationBarContainer: {
width: "100%",
position: "absolute",
backgroundColor: "#0c0326",
left: 0,
right: 0,
bottom: 0,
height: 50,
zIndex: 100, // Should make this responsive to layout
},
NavigationBarWrapper: {
flexDirection: "row",
justifyContent: "space-evenly",
height: 50,
},
});

export default WelcomeScreen;


Подробнее здесь: https://stackoverflow.com/questions/782 ... ioned-view