Question

我正在尝试在expo maps provider ='google'地图的顶部渲染自定义SVG。通过使用position ='relative'可以很容易地在地图顶部显示文本，但是，我似乎也无法将SVG视图框也放置在地图顶部。我目前正在渲染一个视图，其位置与地图相对。但是，当我尝试将svg放置在该视图中时，它失败了，因为它在地图下方创建了视图框。我没有在网上看到任何地方可以设置实际组件的位置类型。有谁知道使视图框的位置相对或在背景顶部放置视图框的技巧？这是一些代码：

Svg代码：

   /FunctioningSvg.js
   import React, { Component } from 'react';
   import { View, StyleSheet } from 'react-native';
   import { Constants, Svg } from 'expo';


    export default class FunctioningSvg extends Component {
    render() {
      return (
        <View style={styles.container}> /* this will work with text */
            <Svg height="70%" width="70%" viewBox="50 0 400 400"> /* right here is my problem, the height and width of the actual SVG component is not layer on top. Can I add a position relative to this viewbox somehow? */
                <Svg.Circle
                    cx="250.22"
                    cy="227.21"
                    r="35.81"
                    fill="none"
                    stroke="#fff"
                    strokeWidth={8}
                />
                <Svg.Circle
                    cx="392.5"
                    cy="91.81"
                    r="48.91"
                    fill="none"
                    stroke="#fff"
                    strokeWidth={8}
                />
                <Svg.Path
                    d="M424.33 91.81h-63.66"
                    fill="none"
                    stroke="#fff"
                    strokeWidth={8}
                />
                <Svg.Path
                    d="M392.38 59.67v63.66"
                    fill="none"
                    stroke="#fff"
                    strokeWidth={8}
                />
                <Svg.Path
                    d="M250.22 450.55L136.13 267.74c-8.78-14.06-7.68-30.6-7.68-47.18 0-49.24 62.68-100.57 121.77-100.57 58.9 0 121.34 50.31 121.34 100.66 0 16.52 1.09 33.01-7.64 47.04l-113.7 182.86"
                    fill="none"
                    stroke="#fff"
                    strokeWidth={8}
                />
            </Svg>
        </View>
    );
}
    }

Svg样式：

    const styles = StyleSheet.create({
       container: {
        marginLeft: '50%',
        position: 'relative',
       },
      });

地图代码：

    <View style={styles.mapContainer}>
          <MapView 
              ref={this.map}
              style={styles.map}  provider="google" customMapStyle={NIGHT_MAP_STYLE}
              initialRegion={{
                latitude: this.props.reduxMap.latitude,
                longitude: this.props.reduxMap.longitude,
                latitudeDelta: this.props.reduxMap.latitudeDelta,
                longitudeDelta: this.props.reduxMap.longitudeDelta,
              }}
              showsCompass={true}
              showsScale={true}
              showsUserLocation={true}
              showsMyLocationButton={true}
              onChange={(event) => this.handleMapViewChange(event)}
              >             
            {this.renderRelevantQueues()}     
          </MapView>
          {/* <View style={styles.createAndCenterView}>
            <Text style={styles.createQueue} onPress={this.createQueue} >Create</Text>
          </View> */}
          <FunctioningSvg />
        </View>

地图样式：

   mapContainer: {
    flex: 1
   },
   map: {
    flex: 1,
   },

如何在地图视图上分层放置SVG？

0 个答案: