React Native Google Places Autocomplete样式不生效及文本显示异常

问题分析 #

1. 样式不生效：react-native-google-places-autocomplete 组件的 style 属性需对应内部特定结构，但部分样式会被组件默认样式覆盖，且占位符颜色这类属性需通过专属 props 配置，而非嵌套在 style 中。
2. 安卓真机文本白色：组件在安卓平台的默认文本/占位符颜色继承了系统主题或内置样式，和黑色背景冲突导致内容不可见。

解决方案 #

1. 显式配置文本与占位符颜色

直接给组件添加 placeholderTextColor props，同时通过 textInputProps 强制锁定输入文本颜色：

<GooglePlacesAutocomplete
  style={homeStyle.searchBar}
  placeholder="Search"
  placeholderTextColor="black" // 单独设置占位符颜色
  query={{
    key: "API_KEY",
    language: "en",
  }}
  textInputProps={{
    style: {
      color: "black", // 强制覆盖安卓默认文本颜色
      fontSize: 16,
    },
  }}
  onPress={(data, details = null) => {
    console.log(data);
  }}
/>

2. 优化容器样式，提升可读性

如果输入框透明背景导致文本和地图冲突，可给输入容器添加背景色，同时确保样式完全覆盖组件默认值：

export const homeStyle = StyleSheet.create({
  // ... 保留原有其他样式
  searchBar: {
    textInputContainer: {
      backgroundColor: "white", // 添加白色背景，避免文本与黑色地图冲突
      borderTopWidth: 0,
      borderBottomWidth: 0,
      borderRadius: 8,
      marginHorizontal: 10,
      paddingHorizontal: 8,
    },
    textInput: {
      height: 38,
      color: "black",
      fontSize: 16,
    },
  },
});

3. 自定义输入框（终极可控方案）

若组件默认样式仍无法覆盖，直接用 renderInput 完全自定义输入框：

<GooglePlacesAutocomplete
  placeholder="Search"
  query={{
    key: "API_KEY",
    language: "en",
  }}
  renderInput={(props) => (
    <TextInput
      {...props}
      style={{
        backgroundColor: "white",
        height: 38,
        borderRadius: 8,
        paddingHorizontal: 12,
        color: "black",
        fontSize: 16,
      }}
      placeholderTextColor="black"
    />
  )}
  onPress={(data, details = null) => {
    console.log(data);
  }}
/>

关键提示 #

• placeholderTextColor 是组件专属 props，无法通过 textInput 的 style 直接设置。
• 安卓平台组件默认会继承系统浅色文本样式，必须显式指定 color 和 placeholderTextColor 才能覆盖。

内容的提问来源于stack exchange，提问作者Rorofy