如何使用react-native-element-dropdown设置默认选中项

要让下拉组件默认选中指定选项，只需确保value绑定的状态变量初始值匹配你想选中的选项的valueField（这里是id）即可，具体操作如下：

• 初始化categoryId状态为目标选项的id值
  如果你想默认选中某个特定分类，直接把categoryId的初始值设为该分类的id。比如默认选中第一个分类：

  const [categoryId, setCategoryId] = useState(categoriesData[0]?.id);
  

  要是分类数据是异步获取的（比如从接口加载），就在数据加载完成后设置默认值：

  useEffect(() => {
    if (categoriesData.length > 0) {
      setCategoryId(categoriesData[0].id); // 默认选中第一个选项
      // 或者选你指定的某个id：setCategoryId(yourTargetId);
    }
  }, [categoriesData]);
  

• 确保初始id在categoriesData中存在
  必须保证你设置的初始id能在categoriesData数组中找到对应的项，否则组件还是会显示占位文本。

修改后的完整组件示例：

import { useState, useEffect } from 'react';
import { Dropdown } from 'react-native-element-dropdown';

// 假设你的分类数据，异步获取的话替换成接口请求
const categoriesData = [
  { id: 1, name: '分类A' },
  { id: 2, name: '分类B' },
  { id: 3, name: '分类C' },
];

const YourComponent = () => {
  // 初始化默认选中第一个分类的id
  const [categoryId, setCategoryId] = useState(categoriesData[0]?.id);

  // 异步数据场景下的处理
  // useEffect(() => {
  //   fetchCategories().then(res => {
  //     setCategoriesData(res);
  //     setCategoryId(res[0].id);
  //   });
  // }, []);

  return (
    <Dropdown
      style={styles.dropdown}
      placeholderStyle={styles.placeholderStyle}
      selectedTextStyle={styles.selectedTextStyle}
      inputSearchStyle={styles.inputSearchStyle}
      iconStyle={styles.iconStyle}
      data={categoriesData}
      search
      maxHeight={300}
      labelField="name"
      valueField="id"
      placeholder="Select or create a category"
      searchPlaceholder="Start typing to search..."
      containerStyle={{ borderRadius: 8 }}
      value={categoryId}
      onChange={(category) => {
        setCategoryId(category.id);
      }}
    />
  );
};

// 你的样式定义
const styles = {
  // ... 你的样式代码
};

export default YourComponent;

原理说明：react-native-element-dropdown会根据value属性的值，在data数组中匹配对应valueField的项，匹配成功后自动展示该项的labelField内容，替代占位文本。

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