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

Question

我正在React Native上实现Google Map，我想知道如何在其顶部添加粘性组件。我四处搜寻，但没有任何明确的指示。感谢您的帮助。

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

中尝试