反应本机|样式表不一致

Question

在构建底部菜单的过程中，我将视图彼此嵌套。我注意到刷新后，ToggleCampus和Text从菜单内部切换到外部，并且位置不一致。我正在尝试调试，但这似乎是一个愚蠢的问题，它没有在正确的时间加载

return (
    <View style={styles.rectangle}>
        <Text style={styles.mainLabel}>{selectedBuilding}</Text>
        <View style={styles.toggle}>
            <ToggleCampus />
        </View>
    </View>
)

export const styles = StyleSheet.create({
rectangle: {
    width: '100%',
    height: 150,
    position: 'absolute',
    borderRadius: 30.5,
    backgroundColor: '#2A2E43',
    justifyContent: 'center',
    bottom: -40
},
toggle: {
    position: 'absolute', 
    justifyContent: 'center', 
    alignItems: 'center',
    left: "75%",
    top: "25%"
},
mainLabel: {
    position: 'absolute', 
    top: '20%', 
    left: '15%', 
    right: 0, 
    bottom: 0, 
    justifyContent: 'center', 
    alignItems: 'center',
    color: '#FFFFFF',
    fontSize: 20,
    fontFamily: 'encodeSansExpanded'
}
});

这里是GIF的切换到处刷新