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

【问题标题】：How can I get this Search Bar style in react-native-element?如何在 react-native-element 中获得这种搜索栏样式？
【发布时间】：2018-09-25 16:31:19
【问题描述】：

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

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

【问题讨论】：

你不需要修改占位符，因为它的样式不可用，你可以修改你的 inputStyles
您是否设法为搜索设置样式？使用 1.1.0 我无法使用任何样式

标签： react-native styles stylesheet

【解决方案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'}

【讨论】：