React Native自定义Dropdown在Android端FlatList无法滚动求助

针对自定义Dropdown组件在Android端FlatList无法滚动的问题，以下是针对性的修复步骤及完整代码：

核心问题分析 #

1. 列表容器listContainer未设置定位规则，导致绝对定位的FlatList在Android上的触摸事件被上层组件拦截
2. Android平台对嵌套滚动的处理逻辑与iOS不同，需显式开启嵌套滚动支持
3. 上层TouchableWithoutFeedback的触摸范围覆盖了下拉列表，导致滚动事件被拦截
4. 部分useCallback依赖项设置错误，引发样式或逻辑更新不及时

具体修复步骤 #

1. 给列表容器添加相对定位 #

修改styles中的listContainer，确保绝对定位的FlatList有正确的父级参考：

listContainer: {
  position: 'relative',
  width: '100%',
  marginTop: 5, // 和输入框保持间距，避免遮挡
}

2. 开启FlatList的嵌套滚动支持 #

在FlatList组件中添加nestedScrollEnabled={true}属性，适配Android的滚动机制：

<FlatList
  style={styles.list}
  data={data}
  renderItem={renderItem}
  keyExtractor={(item) => item}
  showsVerticalScrollIndicator={false}
  nestedScrollEnabled={true} // 新增这一行
/>

3. 调整TouchableWithoutFeedback的作用范围 #

确保TouchableWithoutFeedback只包裹输入框区域，下拉列表移出其包裹范围，避免触摸事件被拦截：

// 下拉列表代码放在TouchableWithoutFeedback外部
{show && (
  <View style={styles.listContainer}>
    <FlatList
      style={styles.list}
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item}
      showsVerticalScrollIndicator={false}
      nestedScrollEnabled={true}
    />
  </View>
)}

4. 修正useCallback的依赖项 #

• hidePicker的依赖项改为setValue，原依赖show和value无意义
• getListItemStyles添加data依赖，避免列表长度变化时样式更新不及时

5. 优化FlatList样式 #

使用maxHeight替代height，适配数据量较少的场景，同时明确设置top位置确保布局正确：

list: {
  backgroundColor: "white",
  elevation: 5,
  zIndex: 220,
  width: "100%",
  position: "absolute",
  borderRadius: 15,
  top: 0, // 明确定位位置
  maxHeight: 200, // 适配数据量少的情况
}

完整修改后的代码 #

const CustomDropDown: React.FC<DropDownProps> = forwardRef(
  (
    { label, data, value, setValue, margin, placeholder },
    ref: ForwardedRef<TextInput>
  ) => {
    const [isFocused, setIsFocused] = useState<boolean>(false);
    const [show, setShow] = useState<boolean>(false);
    const { locale } = useContext(I18nContext);

    const openPicker = useCallback(() => {
      Keyboard.dismiss();
      setIsFocused(!isFocused);
      setShow(!show);
    }, [show]);

    const hidePicker = useCallback(
      (item: any) => {
        setIsFocused(false);
        setShow(false);
        setValue(item);
      },
      [setValue] // 修正依赖项
    );

    const getListItemStyles = useCallback(
      (item: string, index: number): any => {
        if (item === value) {
          if (index === 0) {
            return {
              borderTopRightRadius: 15,
              borderTopLeftRadius: 15,
              backgroundColor: colors.darkBlue,
            };
          } else if (index === data?.length - 1) {
            return {
              borderBottomRightRadius: 15,
              borderBottomLeftRadius: 15,
              backgroundColor: colors.darkBlue,
            };
          } else {
            return {
              backgroundColor: colors.darkBlue,
            };
          }
        }
        return {};
      },
      [value, data] // 添加data依赖
    );

    const ListItem: React.FC<ListItemProps> = memo(
      ({ item, index, value, hidePicker, getListItemStyles }) => (
        <TouchableOpacity
          onPress={() => hidePicker(item)}
          style={[styles.listItem, getListItemStyles(item, index)]}
        >
          <TextResponsive
            style={[
              styles.listItemText,
              item === value && { color: colors.white },
            ]}
          >
            {item}
          </TextResponsive>
        </TouchableOpacity>
      )
    );

    const renderItem = useCallback(
      ({ item, index }: { item: string; index: number }) => (
        <ListItem
          item={item}
          index={index}
          value={value}
          hidePicker={hidePicker}
          getListItemStyles={getListItemStyles}
        />
      ),
      [value, hidePicker, getListItemStyles]
    );

    return (
      <View
        style={[{ flex: 1 }, margin && { marginLeft: 10 }]}
        className="mb-4"
      >
        <TextResponsive style={[styles.label, { fontFamily: fonts.bold }]}>
          {label}
        </TextResponsive>

        <TouchableWithoutFeedback
          onPress={openPicker}
          disabled={data?.length === 0}
        >
          <View style={[styles.inputWrapper, isFocused && styles.inputFocused]}>
            <TextInput
              style={[
                styles.input,
                isFocused && { color: colors.darkBlue },
                { textAlign: locale.includes("ar") ? "right" : "left" },
              ]}
              value={value}
              placeholderTextColor={colors.grey}
              onFocus={() => setIsFocused(true)}
              onBlur={() => setIsFocused(false)}
              editable={false}
              placeholder={placeholder}
            />
            <View style={styles.icon}>
              <AntDesign
                name="caretdown"
                size={12}
                color={isFocused ? colors.darkBlue : colors.grey}
              />
            </View>
          </View>
        </TouchableWithoutFeedback>

        {show && (
          <View style={styles.listContainer}>
            <FlatList
              style={styles.list}
              data={data}
              renderItem={renderItem}
              keyExtractor={(item) => item}
              showsVerticalScrollIndicator={false}
              nestedScrollEnabled={true}
            />
          </View>
        )}
      </View>
    );
  }
);

export default CustomDropDown;

const styles = StyleSheet.create({
  inputWrapper: {
    width: "100%",
    backgroundColor: colors.white,
    borderWidth: 1,
    borderColor: colors.grey,
    borderRadius: 7,
    marginTop: 5,
  },
  input: {
    paddingVertical: 15,
    paddingHorizontal: 10,
    color: colors.grey,
  },
  inputFocused: {
    borderColor: colors.darkBlue,
    elevation: 1,
    shadowColor: colors.lightGrey,
    shadowOpacity: 10,
    shadowOffset: { width: 1, height: 1 },
    overflow: Platform.OS === "android" ? "hidden" : "visible",
  },
  label: {
    marginBottom: 5,
    fontSize: 16,
  },
  list: {
    backgroundColor: "white",
    elevation: 5,
    zIndex: 220,
    width: "100%",
    position: "absolute",
    borderRadius: 15,
    top: 0,
    maxHeight: 200,
  },
  listItem: {
    padding: 10,
  },
  listItemText: {
    fontSize: 16,
  },
  icon: {
    position: "absolute",
    right: 10,
    top: 20,
  },
  listContainer: {
    position: 'relative',
    width: '100%',
    marginTop: 5,
  },
});

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