如何使用 React 本机为我的搜索栏显示边框线

Question

我需要显示边框线，但这里只能看到侧面，顶部和底部都是空白的

我已经使用反应本机元素尝试过这个这是我想要实现的目标 这是我通过此代码得到的

<SearchBar
  round
    lightTheme
    icon={{ type: 'font-awesome', name: 'search' }}
    placeholder="Buscar producto..."
    platform="ios"
    containerStyle={{
      backgroundColor: 'transparent',
    }}
    inputStyle={{ backgroundColor: 'white' }}  
/>

Answer 1

首先，你必须找到SearchBar让你访问的道具是你想要的道具。 inputStyle只设置TextInput组件的样式，而containerStyle设置整个大SearchBar的样式(它有一些额外的填充和我们不想要的东西(。

你想要的道具是inputContainerStyle的，它将围绕TextInput和左右的位来设置容器的样式。因此，要给出边框，您可以简单地执行以下操作：

<SearchBar
  round
  lightTheme
  icon={{ type: 'font-awesome', name: 'search' }}
  placeholder="Buscar producto..."
  platform="ios"
  inputContainerStyle={{ 
    backgroundColor: 'white', 
    borderColor: 'grey',
    borderWidth: 1
  }} 
/>