根據下圖從“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={{ backgroundColor: 'white' }}

您還應該查看searchIcon和cancelIcon道具以重新設置默認SearchBar組件中使用的圖標的樣式。

Answer 2

在對一些邏輯和樣式進行一些更改后設法滿足要求