React原生谷歌位置自动完成风格被忽略



我正在尝试实现react native google places自动完成,它在模拟器上运行。然而,当我尝试用我的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手机上,文本是白色的,而在模拟器上是黑色的,这甚至是在我尝试更改样式之前。

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

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

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

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

最新更新