React Native Maps:如何在地图下方渲染组件?

时间:2018-07-18 21:08:38

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

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

我的问题是,我在地图下方呈现的所有内容都呈现在其顶部。让我告诉你我的意思:

Searchbar and random texts get rendered above the map.

我的问题是如何避免将组件渲染到地图顶部?我希望它们显示在下面。

这是我的代码:

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
  }
});

2 个答案:

答案 0 :(得分: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)
  }
});

答案 1 :(得分:0)

您可以尝试将元素<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
)}

您可以尝试一下,欢呼