React Native Elements Searchbar边框线未清除

时间:2018-03-22 17:48:59

标签: react-native

我正在与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元素本身有关,但无法通过更改边框或阴影来消除它

想知道以前有没有人经历过这样的事情,提前谢谢!

4 个答案:

答案 0 :(得分:10)

使用borderBottomColorborderTopColor作为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',
  },