Javascript 设置自定义模态的样式，不情愿地在自定义模态周围获得白色表面

我想创建一个欢迎模式，然后将其导入一个单独的MainScreen.js文件并在那里实现。 无论我如何风格的模式，总是有一个白色的表面出现在我的模式周围，即使我试图使它只显示为一个“弹出窗口”。我将向您展示我遇到的相关代码部分

MainScreen.js

//Screen Setup for MainScreen

    return(
        <View style={styles.screen}>
            <View style={styles.tophalf}>
                <CustomItemPicker/>
            </View>
            <View style={styles.bottomhalf}>
                <View style={styles.topbuttons}>
                    <CustomButton 
                        style={styles.button} 
                        onPress={addTheItem}
                        children="Add a Item"
                    />
                    <CustomButton
                        style={styles.button}
                        onPress={() => props.navigation.push('Profile')}
                        children = "My Profile"
                    />
                </View>
                <View style={styles.bottombuttons}>
                    <CustomButton
                        style={styles.button}
                        children = "My Messages"
                    />
                    <CustomButton
                        style={styles.button}
                        children = "options"
                    />
                </View>
            </View>
            <WelcomeModal
            modalVisible={modalVisible}
            />
        </View>
    )
};

//Visual Definition of all components

const styles = StyleSheet.create({
    screen:{
        flexDirection: "column",
        flex: 1
    },
    button:{
        fontFamily: "AmaticBold",
        //Shadow Properties
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 5,
        },
        shadowOpacity: 0.34,
        shadowRadius: 6,
        elevation: 3.5,
        width: 125,
        textAlign: 'center'
    },
    tophalf:{
        flex: 1,
        alignItems: "center",
        justifyContent:"center"
    },
    bottomhalf:{
        flex:1,
        alignItems: "center",
        flexDirection: 'column',
        justifyContent: 'space-between'
    },
    topbuttons:{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around'
    },
    bottombuttons:{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around'
    }
    
});

export default MainScreen;

//主屏幕的屏幕设置
返回(
props.navigation.push（'Profile'）}
children=“我的个人资料”
/>
)
};
//所有组件的可视化定义
const styles=StyleSheet.create({
屏幕：{
flexDirection:“列”，
弹性：1
},
按钮：{
fontFamily：“AmaticBold”，
//阴影属性
阴影颜色：“000”，
阴影偏移：{
宽度：0，
身高:5,，
},
阴影不透明度：0.34，
阴影半径：6，
标高：3.5，
宽度：125，
textAlign:“中心”
},
上半场：{
弹性：1，
对齐项目：“中心”，
为内容辩护：“中心”
},
下半部：{
弹性：1，
对齐项目：“中心”，
flexDirection:'列'，
justifyContent:“间距”
},
顶部按钮：{
弹性：1，
flexDirection:'行'，
为内容辩护：“周围的空间”
},
底部按钮：{
弹性：1，
flexDirection:'行'，
为内容辩护：“周围的空间”
}
});
导出默认主屏幕；

WelcomeModal:

const WelcomeModal = props =>{
    return(
        <Modal
        animationType="slide"
        transparent={false}
        visible={props.modalVisible}
        >
            <View style={styles.ModalWindow}>
                <View style={styles.modalItemsWrapper}>
                    <Text style={{fontFamily:"AmaticBold", fontSize: 10}}>
                    bla bla bla bla bla 
                    </Text>
                </View>
                <View style={styles.modalItemsWrapper2}>
                    <Text>Pick a Nickname: </Text>
                    <TextInput/>
                </View>
                <View>
                    <Text></Text>
                    <Checkbox/>
                    <Checkbox/>
                    <Checkbox/>
                </View>
            </View>
        </Modal>
    )
};

const styles = StyleSheet.create({
    ModalWindow:{
        backgroundColor: "red"
        margin: 50,
        flexDirection: 'column',
        alignItems: 'center',
        borderColor: "black",
        borderRadius: 10,
        borderWidth: 2
        //justifyContent: "center",
    },
    modalItemsWrapper:{
        //nothing in here for now
    }
});

export default WelcomeModal;

const-WelcomeModal=props=>{
返回(
呜呜呜呜呜呜呜呜
选择一个昵称：
)
};
const styles=StyleSheet.create({
模态窗口：{
背景颜色：“红色”
差额：50，
flexDirection:'列'，
对齐项目：“居中”，
边框颜色：“黑色”，
边界半径：10，
边框宽度：2
//辩护内容：“中心”，
},
modalItemsWrapper：{
//现在这里什么都没有
}
});
导出默认模式；

在这里，您可以看到结果的图像（主屏幕显示已实现的WelcomeModal

---

正如你所看到的，WelcomeModal出现了，并且有一个合适的边界，问题是现实中的模式是全屏的，而主屏幕完全隐藏在“白色表面”后面这是关于红色自定义模式的。我不知道如何解决此问题。任何帮助都是值得的。

我从一个与react native相关的discord论坛获得了帮助，现在得到了一个适合我的解决方案：

const WelcomeModal = props =>{
    return(
        <Modal
        animationType="slide"
        transparent={true}
        visible={props.modalVisible}
        >
            <View style={{flex:1, backgroundColor: "transparent"}}>
                <View style={styles.ModalWrapper}>
                    <View style={styles.modalItemsWrapper}>
                        <Text style={{fontFamily:"AmaticBold", fontSize: 10}}>
                        bla bla bla bla bla 
                        </Text>
                    </View>
                    <View style={styles.modalItemsWrapper2}>
                        <Text>Pick a Nickname: </Text>
                        <TextInput/>
                    </View>
                    <View>
                        <Text></Text>
                        <Checkbox/>
                        <Checkbox/>
                        <Checkbox/>
                    </View> 
                </View>
            </View>
        </Modal>
    )
};

const styles = StyleSheet.create({
    ModalWrapper:{
        margin: 50,
        flexDirection: 'column',
        alignItems: 'center',
        borderColor: "black",
        borderRadius: 10,
        borderWidth: 2,
        backgroundColor: "red"
    },
    modalItemsWrapper:{

    }
});

export default WelcomeModal;

const-WelcomeModal=props=>{
返回(
呜呜呜呜呜呜呜呜
选择一个昵称：
)
};
const styles=StyleSheet.create({
ModalWrapper：{
差额：50，
flexDirection:'列'，
对齐项目：“居中”，
边框颜色：“黑色”，
边界半径：10，
边界宽度：2，
背景颜色：“红色”
},
modalItemsWrapper：{
}
});
导出默认模式；

解决我的问题的方法是在模态道具内设置transparent={true}，然后将模态内包装视图的backgroundColor设置为“transparent”。这使得只有我想要的红色模态出现