我如何更改 react-native-element 搜索栏的外观

Question

在上图中，搜索框的一半被截掉了，如何使搜索框适合视图。搜索框在一个视图中，“主页”下方的区域在另一个视图中。

我也不想要搜索框的大透明边框。如何去除透明区域？

<View style={styles.screenHeaderContainerBelow}>
            <SearchBar
                lightTheme
                containerStyle={{flex:1, height:undefined}}
                onChangeText={() => {}}
                placeholder='Type Here...' />
            </View>
        </View>

Answer 1

我复制了 the documentation for SearchBar 中的四个示例，并通过添加道具 inputStyle={{margin: 0}} 以及 noIcon 使底部的大透明边框消失，使格式看起来更好：

<SearchBar
          lightTheme
          noIcon
          inputStyle={{margin: 0}}
          onChangeText={someMethod}
          placeholder='Type Here...' />

试试把containerStyle={{flex:1, height:undefined}}去掉，看看能不能解决搜索框被截掉一半的问题。