react-native-google-places-autocomplete搜索结果文字白色不显示问题

问题表现 #

在React Native项目中使用react-native-google-places-autocomplete组件时，输入内容触发搜索弹出结果列表后，列表内文字为白色，和背景混在一起完全看不清。尝试给listView配置color: 'black'样式修改文字颜色，没有任何效果，排查一整天都没定位到诱因。

问题复现代码 #

<GooglePlacesAutocomplete
  returnKeyType={'default'}
  fetchDetails={true}
  minLength={2}
  placeholder="Search"
  textInputProps={{
    placeholderTextColor: '#32a852',
    returnKeyType: 'search',
  }}
  onPress={(data, details = null) => {
    // 开启fetchDetails时会返回details参数
    console.log(data, details);
  }}
  query={{
    key: GOOGLE_API_KEY,
    language: 'en',
  }}
  styles={{
    textInput: {
      height: 38,
      color: '#5d5d5d',
      fontSize: 16,
    },
    predefinedPlacesDescription: {
      color: '#1faadb',
    },
    listView: {color: 'black', zIndex: 100000}, // 该配置无法修改结果文字颜色
  }}
/>

问题原因 #

给listView设置文字颜色不生效，是因为组件的搜索结果文字并没有继承列表容器的文字样式，组件单独暴露了description样式字段控制结果主文本样式，listView样式仅作用于最外层的列表滚动容器，自然改不到内部的文字。
如果项目里做了全局Text组件样式覆写（比如适配暗黑模式时给所有Text默认设了白色），也会导致组件默认文字样式被覆盖，出现白字问题。

修复方案 #

在组件的styles配置中，移除listView里无效的color配置，新增description样式项显式指定结果文字颜色，可同时搭配row样式给结果行设置不透明背景，避免透传页面背景导致的显示异常：

styles={{
  textInput: {
    height: 38,
    color: '#5d5d5d',
    fontSize: 16,
  },
  predefinedPlacesDescription: {
    color: '#1faadb',
  },
  listView: {zIndex: 100000},
  // 控制搜索结果主文字样式
  description: {
    color: '#000000',
    fontSize: 14,
  },
  // 控制单行结果容器样式
  row: {
    backgroundColor: '#ffffff',
    paddingHorizontal: 12,
    paddingVertical: 10,
  }
}}

配置完成后刷新页面，搜索结果文字就会正常显示为黑色。

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