Проблема с TextInput Styling - CSS - Реагировать самостоятельно - PullRequest
0 голосов
/ 28 апреля 2020

У меня есть TextInput в моем родном приложении с 2 значками - поиск и отмена. Кнопка отмены для отмены TextInput.

enter image description here

При нажатии на TextInput появляется раскрывающееся меню, и можно выбрать фильтр.

enter image description here

При выборе фильтра в TextInput появляется текст «Hos ... Aut ...».

enter image description here

Я не хочу, чтобы текст «Больница Auth ..» был таким, какой он есть. Я хочу, чтобы он отображался как кнопка в TextInput, как показано ниже:

enter image description here

Но, как вы можете видеть, у меня есть проблемы с выравниванием. Заполнитель, курсор и кнопка отмены никогда не находятся в одной строке. Это выходит за рамки экрана. Я использовал FlexWrap: «обернуть», но он не работал. Я пробовал с позиции 'absolute', это частично работало.

Ниже приведен мой код:

<View style={container1}>
         <View style={section}>

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

            <View >
            <Button icon={<Icon name="check"/>} type='clear' title ={val} onPress={()=>{this.handleFilterIcon(false)}}  />
            </View>

          <TextInput  
            value={value} 
            placeholder='Search Here...'
            onTouchStart={()=>{this.renderDropdown(true)}}
            style={{ height: 40, width: 290}}
            autoCapitalize='none'
            selectTextOnFocus={true}
          />

          <Icon type='materialicons' name='cancel' onPress={()=>{this.handleFilterIcon(false)}} /> 
          <Button title='Cancel' 
          buttonStyle={{backgroundColor:'#D3D3D3', borderColor: 'grey', borderRadius: 6 , borderWidth: 1, height: 40}}
          onPress={()=>{this.renderDropdown(false)}} /> 
           </View>
        </View>


const styles = StyleSheet.create({
container1: {
    justifyContent: 'center',
    alignItems: 'center',

  },
  section: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderWidth: 0.5,
    borderColor: '#000',
    height: 40,
    borderRadius: 5,
  },
})

Требуется получить фильтр типа WhatsApp или gmail (не THAT advanced), но несколько похожий , При нажатии на фильтр он должен появиться на панели поиска в виде метки / кнопки. Пожалуйста, помогите мне исправить мой код или, если у кого-то есть лучшая идея для выполнения этого фильтра, пожалуйста, дайте мне знать !!!!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...