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

我解决了它添加 ma​​pPadding 属性到 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>

Answer 2

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

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

并参考ScrollView ReactNative的更多功能