如何更改组件上的占位符文本？

Question

我一直试图找到一种方法来更改React本机中的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

您可以使用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});
    }}
  />

你可以看到所有可用的道具这里

Answer 2

更改GooglePlacesAutocomplete标记中的占位符vlaue。

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 3

这个解决方案在React.js中对我有效。

​

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

​