google-maps - 如何在谷歌地图自动完成搜索栏中设置细边框 [React Native]

Question

我正在尝试从 react-native-google-places-autocomplete 创建一个无边界搜索栏，但我似乎无法让边框或阴影或任何可能消失的东西（下图）。

带边框的搜索栏渲染

这是图像中的样式代码。我试过shadowOpacity：0，半透明shadowColor，并设置一个带有半透明颜色的实心边框。

styles = {{
            textInputContainer: {
                width: 370,
                backgroundColor: 'rgba(0,0,0,0)',
                borderColor: 'rgba(0,0,0,0)'
                }

有没有人成功地设计了这个边界？谢谢！

Answer 1

如果你看看他们实现搜索栏的方式，你可以看到默认样式是什么：

textInputContainer: {
  backgroundColor: '#C9C9CE',
  height: 44,
  borderTopColor: '#7e7e7e',
  borderBottomColor: '#b5b5b5',
  borderTopWidth: 1 / PixelRatio.get(),
  borderBottomWidth: 1 / PixelRatio.get(),
  flexDirection: 'row',
},

然后你只需要覆盖它们（正如你所尝试的那样）：

textInputContainer: {
  borderTopWidth: 0,
  borderBottomWidth: 0,
  ...
},

Answer 2

import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
<GooglePlacesAutocomplete
 styles={{
  textInputContainer: {
   backgroundColor: "#fff0",
   borderWidth: 1,
   borderColor: Colors.snowDarkest,
   borderRadius: 3,
   padding: 0,
   justifyContent: "flex-start",
   alignItems: "flex-start",
   width: "100%",
  },
  textInput: {
   color: "#000",
   padding: 0,
   margin: 0,
  },
 }}
/>

如果您在谈论背景颜色，那么您可以使用此代码。无论如何，我不确定您指向哪个边界希望这可以帮助您