Reactnative 莫迪德不会停留在屏幕中央

我是一名新手，正在try 学习如何正确定位组件之间的位置.目前，我做了一个我想要的模式，让它出现在任何背景上.如果我采用制作白色方框的视图，它确实出现在中间.

我想要渲染屏幕上的所有内容:

        <View
            style={Styles.background}>

            <View
                style={{justifyContent:'flex-start', alignItems:'center'}}
            >
                <View
                    style={{
                        backgroundColor:Colors.gtechWhite,
                        width:'80%',
                        height:'25%'
                    }}
                >
                </View>

            </View>

            <View
                style={{flex:1, justifyContent:'center', alignItems:'center'}} >
                {addExerciseModalOpen && <AddExerciseModal setAddExerciseModalOpen={setAddExerciseModalOpen}/>}
            </View>
            <View style={{ position:'absolute', right:'6%', bottom:'14%', alignItems:'flex-end'}} >
                {filterModalOpen && <FilterModal selectedFilter={selectedFilter} setSelectedFilter={setSelectedFilter}  />}
            </View>
            <View style={{position:'absolute', right:'6%', bottom:'8%', alignItems:'flex-end', flexDirection:'row'}}>
                <Pressable
                    style={{paddingRight:35}}
                    onPress={()=>{
                        Haptics.notificationAsync(
                            Haptics.NotificationFeedbackType.Success
                        )
                        setAddExerciseModalOpen(false)
                        setFilterModalOpen(!filterModalOpen);
                    }}
                >
                    <Octicons name="filter"  size={40} color={Colors.darkMode.button} />
                </Pressable>
                <Pressable
                    onPress={()=>{
                        Haptics.notificationAsync(
                            Haptics.NotificationFeedbackType.Success
                        )
                        setFilterModalOpen(false)
                        setAddExerciseModalOpen(!addExerciseModalOpen);

                    }}
                >
                    <Ionicons name="add-circle-outline" size={40} color={Colors.darkMode.button}/>
                </Pressable>
            </View>
        </View>

我想要在中间渲染的组件:

<View style={{
                flexDirection:'row',
                position: 'absolute',
                justifyContent: 'flex-start',
                alignItems: 'flex-start',
                width: '80%',
                height: '34%',
                borderRadius: 25,
                backgroundColor: Colors.darkMode.cards1,
                overflow: 'hidden' }}>
                <View style={{flex:1, top:10}}>
                    <View style={{ alignItems: 'center', paddingBottom:25}} >
                        <Text style={Styles.modalTitleText}>Add An Exercise</Text>

                        <TextInput
                            placeholder="Exercise Name"
                            placeholderTextColor="#ffffff"
                            style={{
                                color:'white',
                                fontFamily:'RobotoSlab-Bold',
                                fontSize:15,
                                marginLeft:25,
                                width:'90%',
                                marginTop:25,
                                height:45}}
                        />
                        <WhiteDivider dividerWidth={90} dividerMarginVertical={0}/>
                        <View style={{
                            flexDirection:'row',
                            flexGrow:1,
                            paddingTop:25,
                            marginRight:15,
                            marginLeft:15,
                        }}>
                            <ScrollView
                                style={{width:'100%'}}
                                horizontal={true}
                                showsHorizontalScrollIndicator={false}
                            >
                                {ExerciseCategories()}
                            </ScrollView>
                        </View>
                        <View style={{
                            flexDirection:'row',
                            flexGrow:1,
                            paddingTop:15,
                            marginRight:15,
                            marginLeft:15,
                        }}>
                            <Pressable
                                style={{alignItems:'center', backgroundColor:Colors.gtechWhiteTransparent, borderRadius:9, width:'95%', paddingVertical:4 }}
                                onPress={()=>setAddExerciseModalOpen(false)}
                            >
                                <Text style={{
                                    color: Colors.gtechGold,
                                    fontSize: 17,
                                    fontFamily: 'RobotoSlab-Medium'}}
                                >
                                    CANCEL
                                </Text>
                            </Pressable>
                        </View>
                        <View style={{
                            flexDirection:'row',
                            flexGrow:1,
                            paddingTop:15,
                            marginRight:15,
                            marginLeft:15,
                        }}>
                            <Pressable
                                style={{alignItems:'center', backgroundColor:Colors.gtechGoldTransparent, borderRadius:9, width:'95%', paddingVertical:4 }}
                                onPress={()=>setAddExerciseModalOpen(false)}
                            >
                                <Text style={{
                                    color: Colors.gtechGold,
                                    fontSize: 17,
                                    fontFamily: 'RobotoSlab-Medium'}}
                                >
                                    SAVE EXERCISE
                                </Text>
                            </Pressable>
                        </View>

                    </View>
                </View>
            </View>