根据下图从“react-native-elements”自定义{ SearchBar }

Question

我正试着用‘react-native-element’来改变搜索栏的样式，它在功能上是可行的，但在样式方面，我遇到了一些问题

我的形象

​

期望的图像

​

我的代码：

            <SearchBar
              //searchIcon={{ size: 24 }}
              onChangeText={text => this.testFilter(text)}
              onClear={text => this.testFilter('')}
              inputStyle={{ backgroundColor: 'white' }}
              containerStyle={{ backgroundColor: '#FFFFFF', borderWidth: 0, marginLeft: 50 }}
              inputContainerStyle={{ backgroundColor: '#FFFFFF' }}
              placeholderTextColor={'#g5g5g5'}
              placeholder={'Search...'}
              clearIcon={false}
              searchIcon={false}
              value={this.state.test}
            />

如何使用搜索栏组件实现相同的样式

Answer 1

在做了一些逻辑和样式的更改后，我成功地满足了需求

Answer 2

你有没有尝试过像这样添加inputContainerStyle属性？

inputContainerStyle={{ backgroundColor: 'white' }}

您还应该查看searchIcon和cancelIcon属性，以重新设置默认SearchBar组件中使用的图标的样式。