react-native-maps：如何在地图边界内显示标注？

Question

我遇到以下代码的问题：只有部分标注可见（其中一部分被屏幕标题隐藏）。是否有一种简单的方法来显示所有内容？

以下是它的外观：

这是代码：

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
      }
    });

Answer 1

简单的技术方法是在文本内容之间添加 ScrollView

<ScrollView>
   <Text>Lorem Lipsum</Text>
</ScrollView>

并参考ScrollView ReactNative

中的更多功能

Answer 2

我解决了将 mapPadding 属性添加到MapView的问题。您必须添加一些顶部填充。应该可以。

mapPadding -将自定义填充添加到地图的每一侧。当地图元素/标记被遮盖时很有用。

Documentation

示例代码：

    <MapView
      style={{
        height: MAP_HEIGHT,
        width: MAP_WIDTH
      }}
      region={{
        latitude: MAP_LATITUDE,
        longitude: MAP_LONGITUDE,
        latitudeDelta: 0.0025,
        longitudeDelta: 0.0121
      }}
      mapPadding={{ top: MAP_HEIGHT / 4 }}
    >
    </MapView>