React Native Maps：如何在地图下方渲染组件？答案

【问题标题】：React Native Maps: How to render components below the map?React Native Maps：如何在地图下方渲染组件？
【发布时间】：2018-12-26 21:42:18
【问题描述】：

我刚刚在我的应用程序中实现了React Native Maps。

我的问题是，我在地图下方渲染的所有内容都渲染在地图之上。让我告诉你我的意思：

我的问题是如何避免我的组件被渲染在地图上？我希望它们呈现在下面。

这是我的代码：

HomeScreen.js：

render() {
    return (
      <SafeContainer>
        <KeyboardAvoidingView style={styles.container}>
          <MapsContainer />
          <SearchBar icon={require("../../assets/icons/searchingGlass.png")} />
          <Text textID={"homescreen_text"}>This is going to be the HomeScreen</Text>
          <RestaurantList />
        </KeyboardAvoidingView>
      </SafeContainer>
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

MapsContainer.js：

  <View style={styles.mapContainer}>
    <MapView
      style={styles.map}
      initialRegion={{
        latitude: 58.192312,
        longitude: 7.072301,
        latitudeDelta: 0.0145,
        longitudeDelta: 0.0055
      }}
    />
  </View>

const styles = StyleSheet.create({
  mapContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    height: imageWidth * (2 / 3),
    backgroundColor: colors.$primaryWhite
  },
  map: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  }
});

【问题讨论】：

标签： react-native flexbox react-native-maps react-native-component react-native-stylesheet

【解决方案1】：

您可以尝试将元素<searchBar/> 或您想要的任何其他元素放在<view/> 组件下。为了确保它在<MapsContainer/> 下方呈现，您应该将<view/> 的位置设置为相对并添加一些边距。

嗯，这是我的意思的伪代码：

主屏幕：

    render() {
    return (
      <SafeContainer>
        <KeyboardAvoidingView style={styles.container}>
          <MapsContainer />
          <View style={styles.view1}> //nesting the element
            <SearchBar icon={require("../../assets/icons/searchingGlass.png")} />
            <Text textID={"homescreen_text"}>This is going to be the HomeScreen</Text>
            <RestaurantList />
          <View/>
        </KeyboardAvoidingView>
      </SafeContainer>
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
  view1: {
   position: relative, //styling goes here
   marginTop: 10
)}

你可以试一试，干杯

【讨论】：

衷心感谢您的帮助，但很遗憾这不起作用:(
在您的设备中，您可能需要在设置中激活显示布局绑定菜单 --> 开发者选项。您可以识别放在屏幕上的所有元素及其大小。从中，您可以分析出了什么问题。

【解决方案2】：

我发现我做错了什么。我在完全不需要的地方使用的地图样式（在第一次实现地图时从一些 github 问题中得到它们：D）。

以下是我现在使用的样式：

const imageWidth = Dimensions.get("window").width;
const styles = StyleSheet.create({
  mapContainer: {
    height: imageWidth * (2 / 3),
    backgroundColor: colors.$primaryWhite
  },
  map: {
    height: imageWidth * (2 / 3)
  }
});

【讨论】：

小心使用这种方法。当用户改变他们的方向时，您必须重新计算窗口宽度。