У меня есть TextInput в моем родном приложении с 2 значками - поиск и отмена. Кнопка отмены для отмены TextInput.
При нажатии на TextInput появляется раскрывающееся меню, и можно выбрать фильтр.
При выборе фильтра в TextInput появляется текст «Hos ... Aut ...».
Я не хочу, чтобы текст «Больница Auth ..» был таким, какой он есть. Я хочу, чтобы он отображался как кнопка в TextInput, как показано ниже:
Но, как вы можете видеть, у меня есть проблемы с выравниванием. Заполнитель, курсор и кнопка отмены никогда не находятся в одной строке. Это выходит за рамки экрана. Я использовал 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), но несколько похожий , При нажатии на фильтр он должен появиться на панели поиска в виде метки / кнопки. Пожалуйста, помогите мне исправить мой код или, если у кого-то есть лучшая идея для выполнения этого фильтра, пожалуйста, дайте мне знать !!!!