如何在react-native-google-places-autocomplete列表中添加图片

react-native-google-places-autocomplete 原生支持该功能，你可以通过组件提供的renderRow属性自定义渲染每一条搜索结果项，自由搭配图片、文字等布局结构，完全可以实现你要的效果。

实现示例 #

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const PlaceSearch = () => {
  return (
    <GooglePlacesAutocomplete
      placeholder='搜索地点'
      query={{
        key: 'YOUR_GOOGLE_MAPS_API_KEY',
        language: 'zh-CN',
      }}
      // 核心自定义行渲染属性
      renderRow={(placeItem) => {
        return (
          <View style={styles.rowContainer}>
            {/* 此处可替换为你需要展示的图片，支持本地资源或网络图片 */}
            <Image
              // 本地图标示例
              source={require('./assets/place-icon.png')}
              // 网络图片示例：可对接谷歌Places Photo接口获取对应地点实景图
              // source={{ uri: '你的图片地址' }}
              style={styles.placeImg}
            />
            <View style={styles.textContainer}>
              <Text style={styles.mainText}>{placeItem.description}</Text>
              {/* 可自由添加二级地址、距离等辅助信息 */}
            </View>
          </View>
        )
      }}
    />
  )
}

const styles = StyleSheet.create({
  rowContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  placeImg: {
    width: 44,
    height: 44,
    borderRadius: 6,
    marginRight: 12,
  },
  textContainer: {
    flex: 1,
  },
  mainText: {
    fontSize: 15,
    color: '#333',
  }
})

export default PlaceSearch;

你可以根据搜索结果返回的地点类型、地点ID匹配对应的图标或实景图，灵活调整布局样式即可。

内容的提问来源于stack exchange，提问作者Золбоо О'