React Native Expo自定义Dropdown在Modal内显示位置异常问题

问题现象 #

参照YouTube教程开发的自定义Dropdown组件在常规场景下运行正常，但放入注册Modal内时，点击后下拉选项会显示在屏幕顶部，而非组件正下方。尝试硬编码top属性只能适配单个位置的Dropdown，无法动态适配不同场景。

问题根源 #

Dropdown内部使用了嵌套Modal，当外层已经存在一个Modal时，内层Modal的布局坐标系基于整个屏幕而非外层Modal容器。原代码中通过onLayout获取的layout.y是相对于外层Modal容器的偏移量，但内层Modal的绝对定位基于屏幕坐标系，导致位置计算完全错误。

解决方案 #

1. 移除嵌套Modal，改用绝对定位View替代 #

内层Modal是问题核心，直接用绝对定位的View放在Dropdown容器内部，让布局坐标系与Dropdown保持一致，无需额外计算屏幕偏移。

2. 利用父容器相对定位锚定下拉选项 #

给Dropdown外层容器设置position: 'relative'，让下拉选项的绝对定位基于父容器，而非全局屏幕。

3. 优化点击关闭逻辑 #

用TouchableWithoutFeedback包裹整个Dropdown区域，点击外部时自动关闭下拉选项，替代原Modal的背景点击逻辑。

修改后的Dropdown组件代码 #

import { AntDesign } from '@expo/vector-icons'
import PropTypes from 'prop-types'
import { useCallback, useState } from 'react'
import {
    FlatList,
    StyleSheet,
    Text,
    TouchableOpacity,
    TouchableWithoutFeedback,
    View,
} from 'react-native'

const Dropdown = ({ data, onChange, width = 300 }) => {
    const [expanded, setExpanded] = useState(false)
    const [value, setValue] = useState('')
    const toggleExpanded = useCallback(() => setExpanded(!expanded), [expanded])

    const onSelect = useCallback((item) => {
        onChange(item)
        setValue(item.value)
        setExpanded(false)
    }, [onChange])

    return (
        <TouchableWithoutFeedback onPress={() => expanded && setExpanded(false)}>
            <View style={[styles.container, { width }]}>
                <TouchableOpacity
                    style={styles.button}
                    activeOpacity={0.8}
                    onPress={toggleExpanded}
                >
                    <Text style={styles.text}>{value || 'Select Option'}</Text>
                    <AntDesign name={expanded ? 'caretup' : 'caretdown'} />
                </TouchableOpacity>
                {expanded && (
                    <View style={styles.options}>
                        <FlatList
                            keyExtractor={(item) => item.value}
                            data={data}
                            renderItem={({ item }) => (
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={styles.optionItem}
                                    onPress={() => onSelect(item)}
                                >
                                    <Text>{item.value}</Text>
                                </TouchableOpacity>
                            )}
                            ItemSeparatorComponent={() => (
                                <View style={styles.separator} />
                            )}
                            maxHeight={250}
                        />
                    </View>
                )}
            </View>
        </TouchableWithoutFeedback>
    )
}

const styles = StyleSheet.create({
    container: {
        position: 'relative', // 锚定子元素绝对定位的基准容器
    },
    button: {
        height: 50,
        justifyContent: 'space-between',
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 15,
        borderRadius: 8,
        borderColor: '#9E9D9E',
        borderWidth: 1,
        backgroundColor: '#fff',
    },
    text: {
        fontSize: 15,
        opacity: 0.8,
    },
    options: {
        position: 'absolute',
        top: '100%', // 自动紧贴按钮下方
        left: 0,
        right: 0,
        backgroundColor: '#fff',
        padding: 10,
        borderRadius: 6,
        maxHeight: 250,
        borderWidth: 1,
        borderColor: '#9E9D9E',
        overflow: 'hidden',
        zIndex: 100, // 确保下拉选项在最上层
    },
    optionItem: {
        height: 45,
        justifyContent: 'center',
        marginBottom: 10,
    },
    separator: {
        height: 1,
        backgroundColor: '#f0f0f0',
        marginBottom: 10,
    },
})

export default Dropdown

修改后的页面结构 #

<View>
  <Modal animationType="slide" transparent={false}>
    <ScrollView>
      <View style={{ padding: 20 }}>
       <Dropdown data={yourData} onChange={handleChange} />
      </View>
    </ScrollView>
  </Modal>
</View>

关键改进点 #

• 移除嵌套Modal，彻底解决坐标系冲突问题
• 通过position: relative+top: '100%'实现下拉选项自动定位，无需手动计算偏移量
• 简化状态管理，删除无用的buttonRef和top状态
• 统一组件样式，让下拉选项与按钮视觉风格保持一致

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