This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

Expo 复选框

一个通用的 React 组件,提供基本的复选框功能。

Android
iOS
tvOS
Web
Included in Expo Go
Recommended version:
~57.0.0

expo-checkbox 为所有平台提供了一个基础的 boolean 输入元素。

安装

🌐 Installation

Terminal
npx expo install expo-checkbox

用法

🌐 Usage

Basic Checkbox usage
import { Checkbox } from 'expo-checkbox'; import { useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { const [isChecked, setChecked] = useState(false); return ( <View style={styles.container}> <View style={styles.section}> <Checkbox style={styles.checkbox} value={isChecked} onValueChange={setChecked} /> <Text style={styles.paragraph}>Normal checkbox</Text> </View> <View style={styles.section}> <Checkbox style={styles.checkbox} value={isChecked} onValueChange={setChecked} color={isChecked ? '#4630EB' : undefined} /> <Text style={styles.paragraph}>Custom colored checkbox</Text> </View> <View style={styles.section}> <Checkbox style={styles.checkbox} disabled value={isChecked} onValueChange={setChecked} /> <Text style={styles.paragraph}>Disabled checkbox</Text> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, marginHorizontal: 16, marginVertical: 32, }, section: { flexDirection: 'row', alignItems: 'center', }, paragraph: { fontSize: 15, }, checkbox: { margin: 8, }, });

下面显示了 expo-checkbox 在 Android 和 iOS 上的显示示例:

🌐 An example of how expo-checkbox appears on Android and iOS is shown below:

应用接口

🌐 API

import { Checkbox } from 'expo-checkbox';

Component

Checkbox

Type: React.Element<CheckboxProps>

CheckboxProps

color

Optional • Type: ColorValue

The tint or color of the checkbox. This overrides the disabled opaque style.

disabled

Optional • Type: boolean

If the checkbox is disabled, it becomes opaque and uncheckable.

onChange

Optional • Type: (event: NativeSyntheticEvent<CheckboxEvent> | SyntheticEvent<HTMLInputElement, CheckboxEvent>) => void

Callback that is invoked when the user presses the checkbox.

event: NativeSyntheticEvent<CheckboxEvent> | SyntheticEvent<HTMLInputElement, CheckboxEvent>

A native event containing the checkbox change.

onValueChange

Optional • Type: (value: boolean) => void

Callback that is invoked when the user presses the checkbox.

value: boolean

A boolean indicating the new checked state of the checkbox.

value

Optional • Type: boolean • Default: false

Value indicating if the checkbox should be rendered as checked or not.

Inherited Props

Types

CheckboxEvent

PropertyTypeDescription
targetany

On native platforms, a NodeHandle for the element on which the event has occurred. On web, a DOM node on which the event has occurred.

valueboolean

A boolean representing checkbox current value.