反应本机谷歌地方自动完成样式被忽略

Question

我正在尝试实现本机反应谷歌放置自动完成并且它可以在模拟器上运行。然而，当我尝试用我的 Android 手机测试它时，搜索栏中的文本和占位符是白色的，所以它就像不可见的文本。我尝试改变风格：

export const homeStyle = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "black",
    paddingTop: 5,
  },
  map: {
    width: width,
    height: height,
    position: "absolute",
  },
  settings: {
    position: "absolute",
    bottom: 0,
    right: 0,
  },
  searchBar: {
    textInputContainer: {
      backgroundColor: "rgba(0,0,0,0)",
      borderTopWidth: 0,
      borderBottomWidth: 0,
    },
    textInput: {
      marginLeft: 0,
      marginRight: 0,
      height: 38,
      color: "black",
      fontSize: 16,
    },
  },
}

但是，我意识到我尝试改变风格的大多数事情都不起作用。 这是代码：

<SafeAreaView style={homeStyle.container}>
      <MapView
        style={homeStyle.map}
        initialRegion={region}
        showsUserLocation={true}
        showsMyLocationButton={false}
        testID={"home-map"}
      />
      <GooglePlacesAutocomplete
        style={homeStyle.searchBar}
        placeholder="Search"
        query={{
          key: "API_KEY",
          language: "en",
        }}
        onPress={(data, details = null) => {
          console.log(data);
        }}
      />
      <IconButton
        icon="cog"
        size={30}
        style={homeStyle.settings}
        onPress={() => {
            settings();
          }
        }
        testID={"home-settings-button"}
      />
    </SafeAreaView>

所以问题是我无法更改 GooglePlacesAutocomplete 组件的样式，而且在我的 Android 手机上文本是白色的，而在模拟器上文本是黑色的，甚至在我尝试更改样式之前也是如此。

Answer 1

我也有同样的问题。 我唯一能提供帮助的是，在 GooglePlacesAutocomplete 中，您需要输入 styles={} 而不是 style={}。 如果您只想更改文本输入的内容，您需要这样做

<GooglePlacesAutocomplete
                styles={{
                    textInput:{height:'100%',backgroundColor: '#eee', 
                    marginVertical: 5 }
                }}
...
/>

这对我帮助很大，但我不知道如何更改占位符文本颜色或您所写内容的文本颜色以及自动完成建议

编辑：https://blog.logrocket.com/google-places-autocomplete-components-react-native/此页面很好地解释了如何使用样式