如何消除 Google 地图自动完成搜索栏中的细边框 [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

如果你看一下他们实现搜索栏的方式，你会发现什么是 the default styles:

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,
  },
 }}
/>

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

如何消除 Google 地图自动完成搜索栏中的细边框 [React Native]

How to style away the thin border in Google Maps Autocomplete search bar [React Native]

google-maps

user-interface

react-native

google-places

googleplacesautocomplete