如何在iOS和Android的react-native中在MapView的底部添加BoxShadow？

Question

我想实现，因为图像最后附在下面。

大多数帮助是针对View元素的，但我在MapView中需要它。我在下面的此链接中尝试了所有内容，但没有一个在MapView中起作用

How do I render a shadow?

我正在使用博览会

下面是我的代码：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  Image,
  TouchableOpacity,
  ActivityIndicator,
  Icon,
  Platform,
  ImageBackground,
  StatusBar
} from 'react-native';
import MapView,{PROVIDER_GOOGLE}  from 'react-native-maps';
import { Constants, Location, Permissions } from 'expo';

export default class Map extends Component {
  static navigationOptions = {
    title: 'Dummy title',
    headerStyle:{
      backgroundColor: 'green',
    },
    headerTitleStyle:{ color: 'white'},
  }
  componentWillMount() {
    if (Platform.OS === 'android' && !Constants.isDevice) {
      this.setState({
        errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!',
      });
    } else {
      this._getLocationAsync();
    }
  }
  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
    }
    let location = await Location.getCurrentPositionAsync({});
    this.setState({ location });
    this.setState({ 
      markers: this.state.markers.concat({
        title: "Current Location",
        coordinates: {
          latitude: location.coords.latitude,
          longitude: location.coords.longitude
        }
      })
    })
  };

  constructor(props) {
    super(props)
    this.state = {
      location: null,
      errorMessage: null,
      heading: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form",
      raw_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.",
      region: {
        latitude: ****,
        longitude: ****,
        latitudeDelta: **,
        longitudeDelta: **,
      },
      markers: [
      ]
    }
  }
  getLocations = () => {
    return fetch('*******', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    })
    .then((response) => response.json())
    .then((responseJson) => {

    })
    .catch((error) => {
      Alert.alert(error);
    });
  }
  componentDidMount() {
    StatusBar.setHidden(true);
  }
  render() {
    return (
      <ImageBackground source={{uri: 'https://******/shadedbg.png'}}
        style={styles.backgroundImage}
        resizeMode={'cover'}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          initialRegion={this.state.region}
        >
          {this.state.markers.map((marker, index) => (
            <MapView.Marker  key={index}
              coordinate={marker.coordinates}
              title={marker.title}
              image={require('../../assets/pin.png')}
            />
          ))}
        </MapView>
        <View style={styles.headingContainer}>
          <Text style={styles.headingText}>{this.state.heading}</Text>
        </View>
        <View style={styles.maptext}>
          <Text style={styles.text}>{this.state.raw_text}</Text>
        </View>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  map: {
    flex: 1
  },
  backgroundImage: {
    flex: 1,
    backgroundColor:'#4FE39D',
  },
  headingContainer:{
    backgroundColor: 'white',
    paddingBottom: 8,
  },
  headingText:{
    fontSize: 16,
    fontWeight: '700'
  },
  maptext:{
    flex: 1,
    backgroundColor:'white',
  },
  text:{
    fontSize: 14
  }
});

谢谢！