如何在React Native中将选中的单选按钮值存储到AsyncStorage中

实现方案 #

你只需要修改单选按钮的选中回调逻辑，搭配AsyncStorage的异步存储方法即可完成需求，完整修改后的代码如下：

import RadioButtonRN from 'radio-buttons-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useEffect, useState } from 'react';

const Radio = () => {
  const label1 = Questions[2].answers[0].answer;
  const label2 = Questions[2].answers[1].answer;
  const label3 = Questions[2].answers[2].answer;
  // 存储当前选中的选项，用于回显默认值
  const [selectedVal, setSelectedVal] = useState(null);

  const data = [
    {
      label: label1,
    },
    {
      label: label2,
    },
    {
      label: label3,
    },
  ];

  // 异步存储选中值到AsyncStorage
  const saveSelectedAnswer = async (selected) => {
    try {
      // AsyncStorage仅支持字符串存储，对象类型需要转成JSON字符串
      await AsyncStorage.setItem('selected_radio_answer', JSON.stringify(selected));
      setSelectedVal(selected);
    } catch (e) {
      // 存储失败的处理逻辑，可按需调整
      console.error('单选选项存储失败:', e);
    }
  };

  // 可选：组件加载时读取上次存储的选项，实现默认选中回显
  useEffect(() => {
    const getSavedAnswer = async () => {
      try {
        const savedVal = await AsyncStorage.getItem('selected_radio_answer');
        if (savedVal) {
          setSelectedVal(JSON.parse(savedVal));
        }
      } catch (e) {
        console.error('存储的单选选项读取失败:', e);
      }
    };
    getSavedAnswer();
  }, []);

  return (
    <RadioButtonRN
      data={data}
      selectedBtn={(e) => saveSelectedAnswer(e)}
      initial={selectedVal} // 配置初始选中值
      box={false}
      circleSize={14}
      activeColor={'#6175CF'}
      style={styles.radio}
    />
  );
};

export default Radio;

补充说明 #

• 代码中的存储key selected_radio_answer 可根据业务需求自定义，后续读取存储值时使用相同key即可
• 如果只需要存储选项的文本内容，不需要存储完整对象，可把存储逻辑修改为 await AsyncStorage.setItem('selected_radio_answer', selected.label)，读取时也不需要调用JSON.parse
• 异常捕获逻辑可根据业务场景调整，比如添加用户提示等操作

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