更改反应基础搜索组件的颜色

时间:2017-09-20 11:02:15

标签: react-native components native native-base

我有一个反应基础搜索组件,我想将蓝色更改为另一种颜色,如图所示。

enter image description here

我用来生成的反应代码来自反应基础网站。

            <Item>
              <Icon name="ios-search" />
              <Input
                placeholder="Search"
                defaultValue={this.state.searchvalue}
                onChangeText={searchvalue =>
                  this.setState({ searchvalue: searchvalue })}
              />
              <Icon
                name="ios-close"
                onPress={() => this.empty()}
              />
            </Item>
            <Button transparent onPress={() => this.search()}>
              <Icon
                style={styles.btnLinkIcon}
                name="ios-checkmark-outline"
              />
            </Button>
          </Header>

1 个答案:

答案 0 :(得分:1)

您可以通过更改Header组件backgroudColor

来完成
<Header style={{ backgroundColor: '#000'}} >
       <Item>
          <Icon name="ios-search" />
          <Input
            placeholder="Search"
            defaultValue={this.state.searchvalue}
            onChangeText={searchvalue =>
              this.setState({ searchvalue: searchvalue })}
          />
          <Icon
            name="ios-close"
            onPress={() => this.empty()}
          />
        </Item>
        <Button transparent onPress={() => this.search()}>
          <Icon
            style={styles.btnLinkIcon}
            name="ios-checkmark-outline"
          />
        </Button>
      </Header>