我正在与react native elements searchbar合作,我正努力让这两条小线在顶部和底部消失 - 我无法弄清楚它们是什么:
Weirdly formatted Searchbar image here
这是我的搜索栏代码:
<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元素本身有关,但无法通过更改边框或阴影来消除它
想知道以前有没有人经历过这样的事情,提前谢谢!
答案 0 :(得分:10)
使用borderBottomColor
和borderTopColor
作为transparent
searchcontainer
searchcontainer: {
backgroundColor: 'white',
borderWidth: 0, //no effect
shadowColor: 'white', //no effect
borderBottomColor: 'transparent',
borderTopColor: 'transparent'
}
希望这会有所帮助
答案 1 :(得分:3)
在新版本的react native元素中
containerStyle={{
backgroundColor:"#FBFBFB",
borderBottomColor: 'transparent',
borderTopColor: 'transparent'
}}
答案 2 :(得分:2)
对于想要删除这些边框的其他人,请尝试分别设置每个边框的宽度:
containerStyle={{
borderWidth: 0, //no effect
borderTopWidth: 0, //works
borderBottomWidth: 0, //works
}}
答案 3 :(得分:0)
完整代码:
import {SearchBar} from 'react-native-elements';
<SearchBar
placeholder="Rechercher"
onChangeText={this.updateSearch}
value={search}
containerStyle={styles.searchBarContainer}
inputContainerStyle={styles.searchBarInputContainer}
inputStyle={styles.searchBarInputStyle}
leftIconContainerStyle={styles.searchBarLeftIconContainer}
rightIconContainerStyle={styles.searchBarRightIconContainer}
lightTheme
placeholderTextColor={styles.placeholderText}
round
showCancel
underlineColorAndroid={styles.placeholderText}
cancelButtonTitle
searchIcon={() => <Image source={searchIcon} style={styles.search} />}
/>
searchBarContainer: {
backgroundColor: COLORS.SEARCHBAR,
alignSelf: 'center',
flexDirection: 'row',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
borderBottomColor: 'transparent',
borderTopColor: 'transparent',
},