如何让react-native-element-dropdown下拉框展开时定位到指定数值（如18）

要实现下拉框展开时自动滚动到指定选项（比如18），可以通过组件ref结合滚动方法或者利用内置属性来实现，以下是具体方案：

方案一：使用onOpen事件+ref手动滚动到目标位置 #

这种方法适合需要在下拉框打开时强制滚动到指定位置（无论是否已有选中值）的场景：

1. 首先创建ref获取Dropdown组件实例：

import { useRef } from 'react';

const dropdownRef = useRef(null);

2. 在Dropdown组件上绑定ref和onOpen事件，回调中调用scrollToIndex方法滚动到目标索引（18对应的索引是17，因为你的data从i+1=1开始生成）：

<Dropdown
  ref={dropdownRef}
  // 你的其他原有属性...
  onOpen={() => {
    dropdownRef.current?.scrollToIndex({ index: 17, animated: true });
  }}
/>

方案二：利用defaultIndex设置默认定位（适合未选中时的默认定位） #

如果希望用户未选中任何值时，下拉框展开默认定位到18，同时保留所有选项，可直接设置defaultIndex属性：

<Dropdown
  // 你的其他原有属性...
  defaultIndex={17} // 对应选项18的索引
/>

注意：若用户已选中某个值，defaultIndex会被选中值的索引覆盖，此时展开会滚动到选中值的位置。

完整修改后的代码示例 #

import { useRef, useState } from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';

const { width } = Dimensions.get('window');

export default function AgeDropdown() {
  const [age, setAge] = useState('');
  const dropdownRef = useRef(null);
  const errors = {}; // 你的错误状态

  return (
    <Dropdown
      ref={dropdownRef}
      style={[styles.input, errors.age && styles.errorInput]}
      data={Array.from({ length: 110 }, (_, i) => ({
        label: `${i + 1}`,
        value: `${i + 1}`,
      }))}
      value={age}
      labelField="label"
      valueField="value"
      onChange={(item) => {
        console.log('Selected age:', item.value);
        setAge(item.value);
      }}
      placeholder="Select Age"
      placeholderStyle={{ color: '#6B7280' }}
      iconColor="#6B7288"
      selectedTextStyle={{ color: 'black', fontSize: width * 0.04 }}
      renderSelectedItem={() => (
        <Text style={{ color: 'black', fontSize: width * 0.04 }}>
          {age}
        </Text>
      )}
      renderItem={(item) => (
        <View style={styles.dropdownItem}>
          <Text
            style={[
              styles.dropdownItemText,
              age === item.value ? { color: 'black' } : { color: 'grey' },
            ]}>
            {item.label}
          </Text>
        </View>
      )}
      onOpen={() => {
        dropdownRef.current?.scrollToIndex({ index: 17, animated: true });
      }}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    // 自定义输入框样式
  },
  errorInput: {
    borderColor: 'red',
  },
  dropdownItem: {
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
  dropdownItemText: {
    fontSize: width * 0.04,
  },
});

注意事项 #

• 索引计算：因为data数组从i+1=1开始生成，选项18对应的数组索引是18-1=17，需注意不要计算错误。
• 动态值定位：如果需要根据动态状态定位，可先找到目标值对应的索引再传入方法：

const targetValue = '18';
const targetIndex = data.findIndex(item => item.value === targetValue);
dropdownRef.current?.scrollToIndex({ index: targetIndex, animated: true });

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