基于react-native-paper实现TextInput悬浮下拉菜单的需求与问题

实现思路 #

• 通过状态变量控制下拉菜单的显示/隐藏
• 给Title输入框外层套一个相对定位的容器，作为绝对定位下拉框的锚点
• 使用FlatList渲染下拉选项，设置position: absolute让菜单覆盖在其他组件上方，避免挤压布局
• 绑定点击事件：点击输入框/下拉图标切换菜单状态，点击选项更新输入值并关闭菜单

完整代码 #

import React, { useState } from 'react';
import { View, StatusBar, FlatList, TouchableOpacity } from 'react-native';
import { TextInput, Text } from 'react-native-paper';

export default function App() {
  const [selectedTitle, setSelectedTitle] = useState('');
  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
  const titleOptions = ['Mr', 'Ms', 'Mrs', 'Dr', 'Prof'];

  const handleTitleSelect = (title) => {
    setSelectedTitle(title);
    setIsDropdownVisible(false);
  };

  return (
    <View style={{ top: StatusBar.currentHeight, flex: 1 }}>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-around',
          marginVertical: 10,
        }}>
        {/* 相对定位容器，作为下拉框的锚点 */}
        <View style={{ width: '30%', position: 'relative' }}>
          <TextInput
            label={'Title'}
            value={selectedTitle}
            style={{ width: '100%' }}
            onPress={() => setIsDropdownVisible(!isDropdownVisible)}
            right={
              <TextInput.Icon 
                icon={isDropdownVisible ? "chevron-up" : "chevron-down"} 
                size={20} 
                onPress={() => setIsDropdownVisible(!isDropdownVisible)}
              />
            }
          />
          {/* 下拉菜单 */}
          {isDropdownVisible && (
            <View 
              style={{
                position: 'absolute',
                top: 60, // 根据TextInput高度调整，确保覆盖在下方
                left: 0,
                right: 0,
                backgroundColor: '#fff',
                borderRadius: 4,
                elevation: 4, // Android阴影
                shadowColor: '#000', // iOS阴影
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.2,
                shadowRadius: 2,
                zIndex: 10, // 确保在最上层
              }}
            >
              <FlatList
                data={titleOptions}
                renderItem={({ item }) => (
                  <TouchableOpacity 
                    style={{
                      padding: 12,
                      borderBottomWidth: 1,
                      borderBottomColor: '#eee',
                    }}
                    onPress={() => handleTitleSelect(item)}
                  >
                    <Text style={{ fontSize: 16 }}>{item}</Text>
                  </TouchableOpacity>
                )}
                keyExtractor={(item) => item}
                showsVerticalScrollIndicator={titleOptions.length > 5}
              />
            </View>
          )}
        </View>
        <TextInput label={'First name'} style={{ width: '60%' }} />
      </View>
      <View style={{ alignSelf: 'center', width: '95%' }}>
        <TextInput
          label={'Phone number'}
          onChangeText={(text) => setSelectedTitle(text)}
        />
      </View>
    </View>
  );
}

关键细节说明 #

1. 相对定位容器：给Title输入框外层添加position: relative，让绝对定位的下拉菜单以这个容器为基准，避免位置偏移
2. 下拉菜单样式：设置zIndex:10确保菜单覆盖在其他组件上方，添加阴影/elevation增强视觉层次，背景色与输入框保持一致
3. 状态切换：点击输入框或右侧图标时，切换isDropdownVisible状态，同时切换图标方向（上/下箭头）
4. 选项交互：点击下拉选项后，更新输入框的值并自动关闭菜单，提升用户体验

内容的提问来源于stack exchange，提问作者talhamaqsood890