如何在反应原生地图中添加粘性组件？

Question

我正在实施一个关于本机的谷歌地图，我想知道如何在它上面添加一个粘性组件。我用Google搜索，但我没有得到任何明确的指示。任何帮助是值得赞赏的人。

Answer 1

在我看来，你想要将视图绝对放在MapView的顶部。

要使视图显示在视图的顶部，它们必须位于返回视图的末尾。它们也必须绝对定位。

在这个小例子中，带有styles.box的视图绝对位于地图的顶部。

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants, MapView } from 'expo';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
         <MapView
          style={{ flex: 1 }}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
        <View style={styles.box} /> // <- this view is absolutely positioned above the MapView
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  box: {
    position:'absolute', 
    bottom: 100, 
    width: 200, 
    height: 50 , 
    alignSelf: 'center',
    backgroundColor: 'red'
  }
});

这就是上面的代码呈现的内容。您可以在这里品尝https://snack.expo.io/@andypandy/absolutely-positioned-view-over-mapview