如何在 React Native 地图中添加粘性组件？

Question

我正在 React Native 上实现一个 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

如何在 React Native 地图中添加粘性组件？

How to add sticky components in react native maps?

google-maps

react-native

react-native-maps