如何在 react-native-element 中获得这种搜索栏样式？

Posted 2023-02-22

【中文标题】如何在 react-native-element 中获得这种搜索栏样式？

【英文标题】：How can I get this Search Bar style in react-native-element?

【发布时间】：2018-09-25 16:31:19

【问题描述】：

它基本上是来自 react-native-elements 的搜索栏组件，其中容器背景颜色为白色，占位符字段具有带半径的边框。

不确定 react-native-element 是否允许为占位符提供样式。 我可以使用样式以及 react-native-elements 搜索栏组件来获得此结果的任何其他方式吗？

【问题讨论】：

你不需要修改占位符，因为它的样式不可用，你可以修改你的 inputStyles

您是否设法为搜索设置样式？使用 1.1.0 我无法使用任何样式

【参考方案1】：

你需要修改input和container样式

 <SearchBar
    inputStyle=backgroundColor: 'white'
    containerStyle=backgroundColor: 'white', borderWidth: 1, borderRadius: 5
    placeholderTextColor='#g5g5g5'
    placeholder='Pritish Vaidya'
/>

查看docs 获取更多道具，您可以提供自己的Icon

【讨论】：

您必须添加“inputContainerStyle=backgroundColor: 'white'”。

搜索栏清除按钮仅在测试类型上显示如何显示always

【参考方案2】：

我在这里做了一个组合的答案

 <SearchBar
    inputStyle=backgroundColor: 'white'
    containerStyle=backgroundColor: 'white', borderWidth: 1, borderRadius: 5
    inputContainerStyle=backgroundColor: 'white'
    placeholderTextColor='#g5g5g5'
    placeholder='Pritish Vaidya'

/>