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

【问题标题】：how to i make changes in appearance of react-native-element search bar如何更改 react-native-element 搜索栏的外观
【发布时间】：2017-07-15 19:24:03
【问题描述】：

在上图中，搜索框的一半被截断，我如何使搜索框适合视图。搜索框在一个视图内，而“主页写入”下方的区域在另一个视图内。

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

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

【问题讨论】：

标签： css react-native react-native-android react-native-ios

【解决方案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}}，看看是否能解决一半搜索框被截断的问题。

【讨论】：