我正在使用Native-Base的Expo。尝试了不同的方式来显示地图,但没有一个像他们应该的那样工作。在内容中,它根本没有显示。当我放弃内容时,它看起来很糟糕,因为内容在滚动时保持固定。当我把ScrolVew而不是内容时,它再次没有显示,当Map在ScrolView之外时它显示但它的超级可怕。请帮我解决这个问题。我需要把它作为底部整个内容的一部分。这是代码:
import React, {Component} from "react";
import {View, Image, StyleSheet, Dimensions,InteractionManager, ScrollView} from "react-native";
import {
Container,
Header,
Content,
Footer,
FooterTab,
Button,
Icon,
Text,
Left,
Right,
Body,
Title,
Thumbnail,
Grid,
Row,
Col,
} from "native-base";
import typographystyles from '../styles/typographystyles';
import { primary, secondary } from '../styles/variables';
import { MapView } from 'expo';
class PostScreen extends Component {
render() {
return (
<Container>
<Content>
<View>
<Grid>
<Row>
<Col style={styles.col} >
<Text style={typographystyles.heading1}> Jennifer </Text>
<Text style={{marginTop:-20, fontSize:16, marginLeft:15}}> Vew and Edit Profile </Text>
</Col>
<Col style={styles.col}>
<Thumbnail style={{marginTop:20}} source={require("../img/profile2.jpg")}/ >
</Col>
</Row>
</Grid>
</View>
<View style={{marginLeft:15, marginBottom:20}}>
<Text style={{marginTop:10,marginBottom:10, fontSize:18}}> 90 EUR per night </Text>
<View style={{flexDirection:'row'}}>
<Icon name="star" style={{color: primary}} />
<Icon name="star" style={{color: primary}} />
<Icon name="star" style={{color: primary}} />
<Icon name="star" style={{color: primary}} />
<Icon name="star" style={{color: primary}} />
<Text style={{marginLeft:10, fontSize:18, color:primary}}> 247 votes </Text>
</View>
</View>
<Text style={{marginLeft:5, marginRight:5}}>
Lorem ipsum dolor sit amet, eum iisque accommodare cu, ex enim eligendi appareat nec. Magna quando aliquid mel ea, exerci nonumes maiestatis eum ei, harum possim sed ut. Mea omnis bonorum posidonium ne, pri ne illud suavitate assentior. His choro numquam ad, mei te integre vituperatoribus. An vim nobis similique theophrastus, mazim mandamus assentior pro id.
Ad bonorum senserit postulant eum, quo et virtute feugiat. Reque laudem referrentur ex mei. Eu vel dico sonet iudicabit. Eos et falli fabulas, eam quis timeam voluptatum ea. Nullam persequeris ne nec. Reque error vivendum sit id, te sit partem aeterno feugait.
</Text>
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
</Content>
</Container>
);
}
}
有什么问题,我该如何解决?