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

Question

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

大多数帮助是针对 View 元素的，但我在 MapView 中需要它。我尝试了下面此链接中的所有内容，但它们都不适用于 MapView

如何渲染阴影？

我正在使用博览会

这是我的代码如下：

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

提前致谢！

标签： reactjsreact-nativeandroid-mapviewbox-shadowshadowbox