时间戳

首页 > 解决方案 > 如何使用 React native 显示搜索栏的边框线

react-native - 如何使用 React native 显示搜索栏的边框线

问题描述

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

我已经使用反应原生元素尝试过这 是我想要实现的 这是我用这段代码得到的 

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

标签： react-native

解决方案

首先，您必须找到可以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
  }} 
/>

推荐阅读