React Native Paper RadioButton组件onPress事件不生效问题咨询

问题根因 #

1. 第二种写法的无限渲染原因 #

onPress={setValue('something')}属于渲染时直接执行函数的错误写法：JSX在渲染节点时就会执行setValue('something')，执行后返回值会被赋值给onPress，而非等待点击事件触发时执行。setState执行后会触发组件重渲染，重渲染时又会再次执行setValue，最终形成死循环导致过度渲染。

2. 第一种箭头函数写法未触发的原因 #

如果你将RadioButton.Item放在RadioButton.Group组件内部，RN Paper默认会由Group统一接管所有子项的选择逻辑，单个Item的onPress回调会被主动拦截忽略，该逻辑是官方组件的默认设计，并非代码写法错误。

解决方案 #

方案1：使用RadioButton.Group的统一监听（推荐） #

将业务逻辑移到RadioButton.Group的onValueChange回调中处理，无需给单个Item绑定onPress：

// 选中值存在状态里
const [selectedValue, setSelectedValue] = useState('');

<RadioButton.Group
  value={selectedValue}
  onValueChange={(newVal) => {
    setSelectedValue(newVal);
    // 此处执行你的业务逻辑，比如你要的setValue操作
    setValue('something');
    // 也可以根据选中的newVal做分支逻辑
    // if(newVal === item._ref) { ... }
  }}
>
  <RadioButton.Item
    label={item.templateName}
    value={item._ref}
    mode="android"
    position="leading"
    labelStyle={{textAlign: 'left'}}
  />
  {/* 其余RadioButton.Item */}
</RadioButton.Group>

方案2：单个Item独立使用（无需Group） #

如果不需要分组管理多个单选选项，直接移除外层的RadioButton.Group，你写的箭头函数onPress就会正常触发：

// 外层无RadioButton.Group时，该写法正常生效
<RadioButton.Item
  label={item.templateName}
  value={item._ref}
  mode="android"
  position="leading"
  labelStyle={{textAlign: 'left'}}
  onPress={()=> setValue('something')}
/>

方案3：外层包裹点击组件兼容 #

如果需要保留Group同时还要给单个Item绑定额外点击逻辑，可以在外层套一层点击组件，禁用Item本身的交互避免冲突：

import { TouchableOpacity } from 'react-native';

<TouchableOpacity onPress={() => setValue('something')} activeOpacity={0.7}>
  <RadioButton.Item
    label={item.templateName}
    value={item._ref}
    mode="android"
    position="leading"
    labelStyle={{textAlign: 'left'}}
    disabled
  />
</TouchableOpacity>

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