React Native中使用Galio Radio组件如何实现FlatList场景下的单选功能

这个问题我太熟悉了！你当前的代码里用了一个布尔值selected来控制所有Radio的选中状态，所有组件共享同一个状态，所以点击任意一个Radio时，所有组件都会读到selected=true，自然全部变成选中状态了。咱们只需要调整状态的存储方式，就能实现单选效果：

步骤1：修改状态存储逻辑 #

把原来的布尔值状态改成存储选中选项的ID，这样就能精准定位到被选中的那一项：

// 初始值设为null表示默认没有选中项，如果你有默认选中的选项，可以替换成对应item的id
const [selectedId, setSelectedId] = useState(null);

步骤2：更新FlatList中Radio组件的属性 #

让每个Radio根据自身的ID和selectedId来判断是否选中，点击时更新selectedId为当前项的ID：

const OptionList = (groupOption) => {
  return (
    <FlatList
      data={groupOption.options}
      keyExtractor={(result) => result.id.toString()}
      renderItem={({ item }) => {
        return (
          <View>
            <Radio 
              label={item.description} 
              onChange={() => setSelectedId(item.id)} 
              initialValue={selectedId === item.id} 
            />
          </View>
        );
      }}
    />
  );
};

原理说明 #

• 每个Radio组件通过selectedId === item.id来判断自己是否处于选中状态，这样同一时间只会有一个Radio满足这个条件
• 点击任意Radio时，只会把当前项的ID存入selectedId，其他Radio的initialValue会自动变为false，完美实现单选效果

如果需要获取当前选中的选项内容，直接在groupOption.options里根据selectedId查找对应的item即可。

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