RadioButton

用于单选控制的 Jetpack Compose RadioButton 组件。

Android

Bundled version:

~55.0.15

一个用于从一组选项中选择单个选项的单选按钮组件。映射到官方 Jetpack Compose RadioButton API。

🌐 A radio button component for selecting a single option from a set. Maps to the official Jetpack Compose RadioButton API.

安装

🌐 Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

🌐 Usage

基本单选按钮

🌐 Basic radio button

一个带有 onClick 处理程序的独立单选按钮。

🌐 A standalone radio button with an onClick handler.

BasicRadioButton.tsx

import { useState } from 'react';
import { Host, RadioButton } from '@expo/ui/jetpack-compose';

export default function BasicRadioButton() {
  const [selected, setSelected] = useState(false);

  return (
    <Host matchContents>
      <RadioButton selected={selected} onClick={() => setSelected(!selected)} />
    </Host>
  );
}

单选框组（推荐）

🌐 Radio group (recommended)

推荐的单选按钮组模式遵循 Compose 可访问性指南：

🌐 The recommended pattern for a radio group follows the Compose accessibility guidelines:

使用带有 selectableGroup() 修饰符的 Column 封装该组，这样屏幕阅读器会将选项视为一个组。
对每个 Row 使用带有 role: 'radioButton' 的 selectable 修饰符，使整行（包括标签）都可以点击。
不要将 onClick 传递给 RadioButton 本身，行会处理交互。这提供了更大的触控目标。

RadioGroup.tsx

import { useState } from 'react';
import { Host, Column, Row, RadioButton, Text } from '@expo/ui/jetpack-compose';
import {
  selectable,
  selectableGroup,
  fillMaxWidth,
  height,
  padding,
} from '@expo/ui/jetpack-compose/modifiers';

export default function RadioGroup() {
  const [selectedOption, setSelectedOption] = useState('Calls');
  const options = ['Calls', 'Missed', 'Friends'];

  return (
    <Host matchContents>
      <Column modifiers={[selectableGroup()]}>
        {options.map(label => (
          <Row
            key={label}
            verticalAlignment="center"
            modifiers={[
              fillMaxWidth(),
              height(56),
              selectable(label === selectedOption, () => setSelectedOption(label), 'radioButton'),
              padding(16, 0, 16, 0),
            ]}>
            <RadioButton selected={label === selectedOption} />
            <Text modifiers={[padding(16, 0, 0, 0)]}>{label}</Text>
          </Row>
        ))}
      </Column>
    </Host>
  );
}

应用接口

🌐 API

import { RadioButton } from '@expo/ui/jetpack-compose';

Component

`RadioButton`

Android

Type: React.Element<RadioButtonProps>

A Material Design radio button.

RadioButtonProps

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback that is called when the radio button is clicked.

`selected`

Android

Type: boolean

Whether the radio button is selected.