React Native 渲染不一致？

Question

我正在用 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'); 中提取的。

Answer 1

在 MapView 之外尝试 MapDetail 并使用 height: "100%", width: "100%"

<View style={{flex:1}}>

   <MapView style={{height: "100%", width: "100%", flex:1}}>
   </MapView>

   <View style={{
        position : 'absolute',
        bottom : 0,
        width: '100%',
        padding : 16,
      }}>
         <MapDetail />
   </View>

</View>