使用expo时，在react-native-maps中添加搜索栏

Question

我想在我的地图屏幕上添加一个搜索栏，然后使用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文档中找不到此功能。这是我需要建立自己的东西吗？

Answer 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>

将产生以下布局。