Question

我需要显示边界线，但在这里只能看到侧面，顶部和底部为空白

我已经使用react native元素尝试过 Here is what I wanted to acheive Here is what I got with this code

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

如何使用React Native显示搜索栏的边界线

1 个答案: