React Native Elements Searchbar边框线未清除

Question

我正在使用反应原生元素搜索栏,我正在努力让顶部和底部的这两条小线条消失 - 我无法弄清楚它们是什么:

这里奇怪的格式化搜索栏图像

这是我的搜索栏代码:

    <SearchBar placeholder="Search contacts..." 
        data={this.state.searchResultFriendsList}
        ref={(ref) => this.searchBar = ref}
        style= {styles.searchbar} 
        lightTheme round 
        containerStyle={styles.searchcontainer}
    />

这是我的两个样式片段:

searchcontainer: {
    backgroundColor: 'white',
    borderWidth: 0, //no effect
    shadowColor: 'white', //no effect
},
searchbar: {
    width: "100%",
    backgroundColor: 'red', //no effect
    borderWidth:0, //no effect
    shadowColor: 'white', //no effect
},

如果我将主题更改为lightTheme默认值,则线条会变为深灰色,因此我知道它与SearchBar元素本身有关,但无法通过更改边框或阴影来消除它.

想知道是否有人之前经历过这样的事情,提前谢谢!

Answer 1

使用borderBottomColor和borderTopColor作为transparent与searchcontainer

searchcontainer: {
 backgroundColor: 'white',
 borderWidth: 0, //no effect
 shadowColor: 'white', //no effect
 borderBottomColor: 'transparent',
 borderTopColor: 'transparent'
}

希望这会有所帮助

Answer 2

对于其他想要删除这些边框的人，请尝试单独设置每个边框的宽度：

containerStyle={{
    borderWidth: 0, //no effect
    borderTopWidth: 0, //works
    borderBottomWidth: 0, //works
}}