如下图所示，从“react-native-elements”自定义 { SearchBar }

Question

我正在尝试使用“react-native-elements”更改搜索栏的样式，从功能角度来看它是有效的，但对于样式，我面临一些问题

我的形象

预期图像

我的代码：

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

            />

如何使用 Searchbar 组件实现相同的样式

Answer 1

你试过inputContainerStyle像这样添加道具吗？inputContainerStyle={{&nbsp;backgroundColor:&nbsp;'white'&nbsp;}}您还应该查看searchIcon和cancelIconprops 来重新设置默认组件中使用的图标的样式SearchBar。

Answer 2

在对一些逻辑和样式进行一些更改后设法满足要求