javascript - TextInput 样式问题 - CSS - React Native

Question

我的本机应用程序中有一个带有 2 个图标的 TextInput - 搜索和取消。用于取消 TextInput 的取消按钮。

单击 TextInput 时会出现一个下拉菜单，并且可以选择过滤器。

在选择过滤器时，“Hos... Aut...”文本出现在 TextInput 中。

我不希望文本“Hospital Auth..”按原样出现。我希望它在 TextInput 中显示为一个按钮，如下所示

但正如你所看到的，我有对齐问题。占位符、光标和取消按钮从不在同一行。它超越了屏幕。我使用了 FlexWrap: 'wrap' 仍然没有用。我尝试使用“绝对”位置，它部分工作。

下面是我的代码：

<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 之类的过滤器（不是那么高级），但有点相似。当您单击过滤器时，它应该作为标签/按钮出现在 searchBar 上。

请帮我修复我的代码，或者如果有人有更好的想法来执行这个过滤器，请告诉我！！！！

标签： javascriptcssreactjsreact-nativeflexbox