反应原生谷歌地方自动完成样式被忽略答案

【问题标题】：React native google places autocomplete style is ignored反应原生谷歌地方自动完成样式被忽略
【发布时间】：2022-11-11 02:17:22
【问题描述】：

我正在尝试实现反应原生谷歌位置自动完成，它适用于模拟器。但是，当我尝试用我的 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: "AIzaSyAhZVYw7_fop94kBO63xKxKdiX_GJGLKO0",
          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 手机上文本是白色而在模拟器上是黑色的事实，甚至在我尝试更改样式之前。

【问题讨论】：

标签： android reactjs react-native styled-components googleplacesautocomplete

【解决方案1】：

我也有同样的问题。我唯一能帮上忙的是，在 GooglePlacesAutocomplete 中，您需要输入 style={} insted of style={}。如果您只想更改文本输入的内容，则需要这样做

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

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

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

【讨论】：