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

Question

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

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

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

Answer 1

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

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

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