我正在用react native编写一个应用程序，并在ios模拟器上进行测试。
由于某些原因，通过metro刷新时渲染行为不一致（请参见下面的屏幕截图）。我的应用程序编程方式有问题吗？我有一个组件如下所示：

import React from "react";
import MapView from "react-native-maps";
import { StyleSheet } from "react-native";
import MapDetail from "./MapDetail";
import { SCREEN_HEIGHT, SCREEN_WIDTH } from "./constants";

const styles = StyleSheet.create({
    map: {
        position: 'relative',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT,
    }
});

export default () => {
    return (
        <MapView
            style={styles.map}
            showsUserLocation={true}
        >
            <MapDetail />
        </MapView>
    );
};

哪里 <MapDetail /> 是：

import React  from "react";
import { StyleSheet, Text, View } from "react-native";
import { PADDING, SCREEN_WIDTH } from "./constants";

const styles = StyleSheet.create({
    container: {
        bottom: 50,
        position: 'absolute',
        width: SCREEN_WIDTH,
        padding: PADDING,
    },
    card: {
        backgroundColor: 'white',
        height: 200,
        padding: PADDING,
        width: '100%',
    },
    text: {
        textAlign: 'center',
        color: 'red',
        fontSize: 20,
    }
});

export default () => {
    return (
        <View style={styles.container}>
            <View style={styles.card}>
                <Text style={styles.text}>
                    Hello world!
                </Text>
            </View>
        </View>
    );
};
``` `SCREEN_WIDTH` 及 `SCREEN_HEIGHT` 从 `Dimensions.get('window');` .
![](https://i.stack.imgur.com/8xFaL.jpg)
![](https://i.stack.imgur.com/ZjJX7.jpg)
![](https://i.stack.imgur.com/VAXmZ.jpg)