如何在React Native的Native Base中将搜索栏固定在选择模态框顶部

要把搜索栏固定在Native Base Select的模态框顶部，核心是把搜索组件从列表头部移到模态框的固定头部区域，具体修改如下：

修改后的代码 #

<Select 
  selectedValue={selected} 
  onValueChange={val => setSelected(val)}
  fontSize='sm' 
  borderColor='transparent' 
  borderRadius='2xl'
  bg='muted.100' 
  _dark={{ bg: 'muted.800' }}
  h={12} 
  px={4}
  _item={{ _pressed: { bg: 'transparent', opacity: 0.8 } }}
  // 把搜索栏移到模态框固定头部
  _actionSheetHeader={{
    paddingX: 3,
    paddingTop: 3,
    paddingBottom: 2,
    borderBottomWidth: 1,
    borderBottomColor: 'muted.200',
    _dark: { borderBottomColor: 'muted.700' },
    children: (
      <FormControl>
        <Input
          px={4}
          py={2}
          fontSize={16}
          placeholder={i18n.t('search')}
          value={searchValue}
          _focus={{ bg: 'gray', borderColor: 'darkBlue.600' }}
          type='text'
          onChangeText={(value) => {
            setSearchValue(value)
          }}
        />
      </FormControl>
    )
  }}
  _actionSheetBody={{
    // 移除原来的ListHeaderComponent
  }}
>
  {/* 根据搜索词过滤列表项，实现实时搜索 */}
  {items
    .filter(item => item.toLowerCase().includes(searchValue.toLowerCase()))
    .map((item, index) => (
      <Select.Item key={index} label={item} value={item}/>
    ))
  }
</Select>

关键说明 #

• 原来的ListHeaderComponent属于下拉列表的一部分，滚动时会跟着列表移动，换成_actionSheetHeader后，搜索栏会固定在模态框的顶部区域，不会随列表滚动。
• 给_actionSheetHeader添加了底部边框和内边距，让布局更清晰，你可以根据需求调整样式细节。
• 补充了搜索过滤逻辑，输入搜索词时列表会实时过滤匹配项，完善搜索功能。

内容的提问来源于stack exchange，提问作者Muhammet Rasit Goktas