У меня проблема со следующим кодом: видна только часть выноски (часть скрыта заголовком экрана).Есть ли простой способ отобразить все это?
Вот как это выглядит:
И это код:
import React, { Component } from 'react';
import { StyleSheet, View, Text, Modal, TouchableOpacity } from 'react-native';
import { MapView } from 'expo';
const mapCoord = {
latitude: 35.6,
longitude: 139.8,
latitudeDelta: 4,
longitudeDelta: 4
};
const city = { latitude: 37.0, longitude: 140.5 };
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
isMapReady: false,
appModalVisible: false
};
}
onMapLayout() {
this.setState({ isMapReady: true });
}
render() {
return (
<View style={{ flex: 1 }}>
<View style={styles.headerViewStyle}>
<Text style={styles.headerStyle}>
Map Title
</Text>
</View>
<MapView
style={{ flex: 1 }}
zoomEnabled = {false}
rotateEnabled = {false}
scrollEnabled = {false}
region={mapCoord}
onLayout={this.onMapLayout.bind(this)}
onPress={(e) => this.onMapPress(e)}
>
{this.state.isMapReady &&
<View>
<MapView.Marker
coordinate={city}
stopPropagation = {true}
ref={marker => {
this.marker1 = marker;
}}
onPress={() => {console.log("Marker/onPress");}}
onCalloutPress={() => {console.log("Marker/onCalloutPress");
this.marker1.hideCallout();}}
>
<MapView.Callout>
<View style={styles.viewStyle}>
<Text style={styles.textStyle}>
info:
</Text>
<Text>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</Text>
</View>
</MapView.Callout>
</MapView.Marker>
</View>
}
</MapView>
<Modal
animationType="slide"
transparent={false}
visible={this.state.appModalVisible}
onRequestClose={() => {
this.setState({ appModalVisible: false });
}}>
<View style={styles.modalContainerViewStyle}>
<View style={styles.modalViewStyle}>
<Text style={styles.textStyle}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>
<View style={{ height: 40, margin: 5 }}>
<TouchableOpacity style={styles.buttonStyle}
onPress={() => { this.setState({ appModalVisible: false }); }}>
<Text style={{ fontSize: 20 }}>OK</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</View>
);
}
onMapPress(e) {
console.log("In onMapPress. coordinate: ", e.nativeEvent.coordinate);
this.setState({ appModalVisible: true });
}
}
const styles = StyleSheet.create({
textStyle: {
fontSize: 16,
alignSelf: 'center',
padding: 5
},
button: {
width: 80,
paddingHorizontal: 12,
alignItems: 'center',
marginHorizontal: 10
},
buttonContainer: {
flexDirection: 'row',
marginVertical: 20,
backgroundColor: 'transparent',
justifyContent: 'center'
},
viewStyle: {
width: 200,
height: 250,
backgroundColor: "#fff",
padding: 20
},
headerViewStyle: {
justifyContent: "center",
alignItems: "center",
height: 60,
backgroundColor: "#f5f5f5",
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 2,
elevation: 3,
position: 'relative'
},
headerStyle: {
fontSize: 20,
fontWeight: "bold"
},
modalContainerViewStyle: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#00000080'
},
modalViewStyle: {
width: 300,
height: 380,
backgroundColor: "#fff",
padding: 20
}
});