如何在react-native-element搜索栏的外观上进行更改

Question

在上图中，搜索框的一半被截断，如何使搜索框适合视图。搜索框位于一个视图内，而编写主页的位置在另一个视图中。

此外，我不想要搜索框的大透明边框。如何摆脱透明区域？

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

Answer 1

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

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

the documentation for SearchBar

尝试取出containerStyle={{flex:1, height:undefined}}以查看是否可以解决搜索框被截断一半的问题。