Проблема с фильтром при использовании Search / Filter logi c - React Native

Question

У меня проблемы с моим приложением React Native !!!! У меня есть простой Flatlist. У меня есть TextInput, у которого есть опция фильтра. Щелкните внутри TextInput. Появится раскрывающийся список фильтров.

Щелкните этот фильтр, который отображается внутри TextInput.

Нужна помощь в стилизации этого !!! Это должно выглядеть примерно так. Если не до такой степени, то, по крайней мере, рамка вокруг него в порядке.

Я пробовал это с помощью элементов Button - React Native. Это так расстраивает. Я не могу использовать сторонние библиотеки (политика компании).

Код ввода текста:

                      <Icon type='materialicons' name='search'  />    // search icon


                      <Button icon={<Icon name="check"/>}.  //my attempt to create a button around the filter 
                              type='clear' title ={val}
                              onPress={()=>{this.handleFilterIcon(false); this.setFilt(false)}}/>



                  <TextInput       // Text Input
                    value={value} 
                    placeholder='Search Here...'
                    onChangeText={(text)=>{this.handleSearch(text, true);this.renderDropDown(false)}}  
                    onTouchStart={()=>{this.setTempNotifications();this.renderDropDown(true)}}
                    style={{ height: 40, flex: 1}}
                    autoCapitalize='none'
                    selectTextOnFocus={true}
                    label='input'
                  />

                  <Icon type='materialicons' name='cancel' onPress={()=>{} /> // Clear Icon

                  <Button title='Cancel' 
                  buttonStyle={{backgroundColor:'#D3D3D3', borderColor: 'grey', borderRadius: 6 , borderWidth: 1, height: 40}}
                  onPress={()=>{} />   // Cancel button

Кто угодно, подскажите, пожалуйста, наиболее эффективный способ сделать это !!!

Answer 1

Я вижу единственный способ, поскольку вам не нужно использовать сторонние библиотеки:

1. Создайте пустую метку рядом с вводом. Оберните эти два элемента div с position:relative
2. . Как только ввод будет введен, поместите тот же текст в эту метку. Настройте эту метку с помощью стиля: position:absolute;background:grey...

Просто чтобы дать вам некоторое представление, вот реализация в JQuery. Вы должны продвинуться вперед и задать конкретный c вопрос, в чем вы боретесь.

function inputChange(val){
  $('label').text(val);
  $('input').val("");
}

label{
  border:1px solid;
  border-radius: 5px;
  position: absolute;
  background: grey;
  left:2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
 <input type="text" onchange="inputChange(this.value)"/>
  <label></label>
</div>

В React та же реализация может выглядеть примерно так. Вы можете создать файл с этой реализацией, импортировать в свое приложение. js и посмотреть. Развивайте эту идею и измените стиль и поведение в соответствии с потребностями.

import React, { Component } from 'react';
class CustomInputTextstyling extends Component {
    constructor(props) {
        super(props);
        this.state ={
            inputText: ""
        }

    }

    handleInputChange(e){
      this.setState({inputText: e.target.value});
    }

    render() {
        const wrapperDiv = {
            position: 'relative'
        }

        const label = {
            border:'1px solid',
            borderRadius: '5px',
            position: 'absolute',
            background: 'grey',
            left:'2px'
          }
        return (
            <div style={wrapperDiv}>
                <input type = "text" onBlur = {this.handleInputChange.bind(this)}></input>
                <label style={label}>{this.state.inputText}</label>
            </div>
        );
    }
}

export default CustomInputTextstyling;