文本和视图的奇怪行为

Question

我有一个MapView，上面有一个文本：

<View style={{ height: 310, alignItems: 'center', marginBottom: 10 }}>
    <MapView style={ { height: 300, width: 350, } } initialRegion= .. >

    <View style={{ height: 60, backgroundColor: 'rgba(255,255,255,0.7)' , flexDirection: 'column'}}>
        <View style={{flexDirection: 'row'}} >
            <Text style={{ fontSize: 20, color: 'black' }}>  {this.state.title} </Text>
        </View>
        <View style={{flexDirection: 'row'}}>
            <Text style={{ marginTop: 5, fontSize: 15, color: 'black', marginRight: 13}}>  {this.state.startLoc.name} </Text>
            <Text style={{ marginTop: 5, fontSize: 15, backgroundColor: 'transparent', color: 'black' }}>  {buildTimeString(new Date(this.state.startDate))} </Text>
            <Text style={{ marginTop: 5, fontSize: 15, backgroundColor: 'transparent', color: 'black' }}>  {getDistanceOneToOne(this.state.startLoc, this.state.destinationLoc).distance} </Text>
        </View>
    </View> 
..
</View>

有时它会显示两个文本（行），但大多数时候它显示错误（僵尸程度在彼此之上）：

可能是什么问题？