expo-checkbox

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

@amazon-devices/expo-checkboxライブラリは、基本的なboolean入力をAndroid、iOS、ウェブ、Vegaに提供します。より柔軟性の高いコンポーネントが必要な場合は、独自のチェックボックスを実装するためのガイド（英語のみ）を参照してください。

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。
クリップボードにコピーしました。
```
 "dependencies": {
 ...
 "@amazon-devices/expo-checkbox": "~2.0.0"
 }
```
npm installコマンドを使用して、依存関係を再インストールします。

例

次の例は、Checkboxの基本的な使い方を示しています。

クリップボードにコピーしました。

import React, {useState} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import Checkbox from '@amazon-devices/expo-checkbox';

export const App = () => {
  const [isChecked, setChecked] = useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.checkboxContainer}>
        <Checkbox
          style={styles.checkbox}
          value={isChecked}
          onValueChange={setChecked}
        />
        <Text style={styles.label}>Checkbox</Text>
      </View>
      <Text>Is Selected: {isChecked ? 'true' : 'false'}</Text>
      <View style={styles.checkboxContainer}>
        <Checkbox
          style={styles.checkbox}
          value={isChecked}
          onValueChange={setChecked}
          color={isChecked ? '#E22E07' : undefined}
        />
        <Text style={styles.label}>Custom color</Text>
      </View>
      <View style={styles.checkboxContainer}>
        <Checkbox
          style={styles.checkbox}
          disabled
          value={isChecked}
          onValueChange={setChecked}
        />
        <Text style={styles.label}>Disabled checkbox</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'white',
  },
  checkboxContainer: {
    flexDirection: 'row',
    marginVertical: 10,
  },
  checkbox: {
    alignSelf: 'center',
  },
  label: {
    margin: 8,
  },
});

APIリファレンス

このライブラリとAPIリファレンス情報の詳細については、公式Expoドキュメントのexpo-checkbox（英語のみ）のページを参照してください。

components

コンポーネント	説明
`Checkbox`	`boolean`入力要素。

Checkboxのプロパティ

プロパティ	説明
`color`	チェックボックスの色合いまたは色。これは、無効な状態の淡色のスタイルをオーバーライドします。
`disabled`	チェックボックスを無効にすると、チェックボックスは淡色で表示され、オン／オフの切り替えができなくなります。
`onChange`	ユーザーがチェックボックスを押したときに呼び出されるコールバック
`onValueChange`	ユーザーがチェックボックスを押したときに呼び出されるコールバック
`value`	チェックボックスがオンまたはオフの場合にレンダリングされるかどうかを示す値

サポートされているバージョン

パッケージのバージョン	ベース	@amazon-devices/react-native-kepler version
2.0.x	2.6.0	2.0.x