Опция фильтра, такая как WhatsApp или Gmail - React Native - PullRequest
Новая
       29

Опция фильтра, такая как WhatsApp или Gmail - React Native

0 голосов
/ 25 апреля 2020

Я хочу получить некоторые параметры фильтра / стили, такие как WhatsApp или Gmail. Ниже показано:

enter image description here

Подсветка вокруг выбранного фильтра и кнопка очистки на панели поиска.

В настоящее время это выглядит так в моей панели поиска -

enter image description here

Как я могу получить эту синюю подсветку вокруг «Мои встречи» и кнопки «Очистить» ??

Мой код, как показано ниже. У меня есть простой плоский список из 3 элементов и панель поиска с 2 фильтрами.

Панель поиска 

            lightTheme  
            value={value}
            placeholder="Search products, brands"            
            onChange={(text)=>{this.setSearch(text)}} 
            onChangeText={(text)=>{this.handleSearch(text,false)}}     
            onTouchStart={()=>{this.renderDropdown(true)}}       
          />

Мой список опций фильтра. У меня есть два фильтра: «Тим» и «Готовить»: 

const list = [
        {
          name: 'cook',
        },
        {
          name: 'Tim',
        }
      ]


{
              list.map((l, i) => (
                <TouchableHighlight underlayColor='red' onPress={()=>{this.setValue(l.name)}}> 
               <View>
                <ListItem
                  key={i}
                  title={l.name}
                  subtitle={l.subtitle}
                  bottomDivider
                /> 
                </View>
                </TouchableHighlight>

              ))
            }

Пожалуйста, помогите мне получить синюю подсветку и кнопку Очистить на панели поиска.

...