在地图上反应原始位置搜索栏

Question

如何将搜索栏放置在地图上上，而不是地图旁边（屏幕截图）？我想模仿我的Google Maps应用程序的外观。他们在地图的前10％以上有条形图。

<View>
        <StatusBar backgroundColor="rgba(1.0, 0, 0, 0.2)" translucent />
        <SearchBar
          ref='searchBar'
          placeholder='Find me'
          barStyle="black"
          showsCancelButtonWhileEditing={false}
        />
        <MapView
          provider={ PROVIDER_GOOGLE }
          style={ styles.container }
          initialRegion={{
            latitude: 32.815013,
            longitude: -117.273404,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>

Answer 1

使用flex: 1将MapView拉伸到全屏尺寸。

绝对定位搜索栏并设置坐标。 position: absolute;