关于reactjs:在React本机上将组件放在MapView上

Placing a component on MapView in react native

我试图在地图上放置一个位置图标,有时在重新加载后,该图标会离开应该包裹的容器。以下是我所指的图像,任何人都可以帮忙。铅>

有时它显示了这个
enter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
              <MapView
                style={map}
                region={region}
                showsUserLocation
                loadingEnabled
                showsCompass
                showsTraffic
                onRegionChangeComplete={this.onRegionChangeComplete}
                onRegionChange={this.onRegionChange}
                ref={el => (this.mapView = el)}
              >
              <Fragment>
                <LocationButton
                  onPress={this.refocus}
                  style={locationFocus}
                />
              </Fragment>
              </MapView>
            )}
            </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
      map: {
        position: 'absolute',
        flex: 1,
        width: '100%',
        height: '100%',
      },
      locationFocus: {
        position: 'absolute',
        bottom: 200,
        right: 20,
      }

});


从MapView容器中删除" LocationButton",然后添加主容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<View style={{flex:1}}>
      <MapView
          style={map}
          region={region}
          showsUserLocation
          loadingEnabled
          showsCompass
          showsTraffic
          onRegionChangeComplete={this.onRegionChangeComplete}
          onRegionChange={this.onRegionChange}
          ref={el => (this.mapView = el)}
        >
    </MapView>
    <Fragment>
      <LocationButton
        onPress={this.refocus}
        style={locationFocus}
      />
    </Fragment>
</View>