如何在 React Native 中更改 Google Places Autocomplete 组件上的占位符文本？

Question

我一直在尝试寻找一种方法来更改 React Native 中 GooglePlacesAutocomplete 组件的占位符文本。我试过查看官方文档，但没有看到任何相关内容。有人对此有解决方案吗？我尝试过使用诸如 placeholderTextColor 之类的道具，但它对我不起作用。谢谢。

代码

<GooglePlacesAutocomplete 
                    renderLeftButton={()  => <Icon name='location'
                    type='evilicon' color={colors.middlegray} style={styles.icon}/>}
                    placeholder="Where is it?"
                    styles={toInputBoxStyles}
                    returnKeyType={"search"}
                    fetchDetails={true}
                    name="location"
                    enablePoweredByContainer={false}
                    nearbyPlacesAPI="GooglePlacesSearch"
                    debounce={400}
                    value={searchWords.searchKeyword}
                    query={{
                        key: GOOGLE_MAPS_APIKEY,
                        language: 'en'
                    }}
                    onPress={(data, details = null) => {
                        setSearch({searchKeyword: data.description});
                    }}
                    />

Answer 1

更改 Google 地方信息自动完成标记中的占位符值。

import React from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const GooglePlacesInput = () => {
  return (
    <GooglePlacesAutocomplete
      placeholder='Enter your placeholder text here'
    />
  );
};

export default GooglePlacesInput;

Answer 2

你可以用textInputProps设置placeholderTextColor，像这样：

<GooglePlacesAutocomplete 
      ...
      placeholder="Where is it?"
      textInputProps={{
        placeholderTextColor: '#32a852',
        returnKeyType: "search"
      }}
      ...
      query={{
      key: GOOGLE_MAPS_APIKEY,
      language: 'en'
    }}
    onPress={(data, details = null) => {
      setSearch({searchKeyword: data.description});
    }}
  />

您可以看到所有可用道具here

Answer 3

这个解决方案在 React.js

对我有用

<GooglePlacesAutocomplete
            selectProps={{
              placeholder: 'here is the placeholder text'
            }}
          />

如何在 React Native 中更改 Google Places Autocomplete 组件上的占位符文本？

How Do I Change Placeholder Text on Google Places Autocomplete Component in React Native?

colors

placeholder

reactjs

react-native

googleplacesautocomplete