使用 expo 时将搜索栏添加到 react-native-maps答案

【问题标题】：Add search bar to react-native-maps when using expo使用 expo 时将搜索栏添加到 react-native-maps
【发布时间】：2019-03-07 19:35:37
【问题描述】：

我想在我的地图屏幕上添加一个搜索栏，然后使用 google 查找与输入文本关联的位置并将地图移动到那里。

这就是我现在拥有的：

import React, { Component } from 'react';
import {
    View
} from 'react-native';
import { Mapview } from 'expo';

export default class screen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            initialRegion: {
                latitude: 37.78825,
                longitude: -122.4324,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
            }
        };
    }    
    render() {
        return (
            <View>
                <MapView
                    style={{ flex: 1 }}
                    initialRegion={this.state.initialRegion}
                />
            </View>
        )
    }
}

我在react-native-maps 文档中找不到此功能。这是我需要自己构建的东西吗？

【问题讨论】：

标签： react-native expo react-native-maps

【解决方案1】：

这个答案包括在你的地图上添加一个搜索框。

根据 react-native-docs (https://github.com/react-native-maps/react-native-maps#overlaying-other-components-on-the-map) 中的规定，您需要使用绝对定位。

例如下面的代码：

  <MapView loadingEnabled={true} style={styles.map} />
  <View style={{ position: 'absolute', top: 10, width: '100%' }}>
    <TextInput
      style={{
        borderRadius: 10,
        margin: 10,
        color: '#000',
        borderColor: '#666',
        backgroundColor: '#FFF',
        borderWidth: 1,
        height: 45,
        paddingHorizontal: 10,
        fontSize: 18,
      }}
      placeholder={'Search'}
      placeholderTextColor={'#666'}
    />
  </View>

将产生以下布局。

【讨论】：

这对我有用。非常感谢。