反応でチェックボックスを表示するにはどうすればよいですか？

チェックボックスは、UIでよく使用する一般的なコンポーネントです。反応性でチェックボックスを表示するためのクールウェイがいくつかあります。

コアのreact-nativeパッケージにはチェックボックスがサポートされていないため、パッケージをインストールして使用する必要があります。

チェックボックスを表示するには、次のパッケージをインストールする必要があります-

npm install --save-dev react-native-paper

基本的なチェックボックスコンポーネントは次のとおりです-

<Checkbox status={checkboxstatus} onPress={onCheckboxCheckedfunc} />

チェックボックスのいくつかの重要なプロパティを見てみましょう-

これが簡単なチェックボックス表示です-

useStateは、以下に示すように、チェックボックスのチェックされたステータスとチェックされていないステータスを設定するために使用されます-

const [checked, setChecked] = React.useState(false);

状態はチェックされた変数内で維持され、setCheckedメソッドを使用して更新されます。

チェックされたステータスは、ユーザーが以下に示すようにチェックボックスをオン/オフにすると更新されます-

onPress={() => {
   setChecked(!checked);
}}

完全なコードは次のとおりです-

例

import * as React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import { Checkbox } from 'react-native-paper';
const MyComponent = () => {
   const [checked, setChecked] = React.useState(false);
   return (
      <SafeAreaView style={styles.container}>
         <Checkbox
            status={checked ? 'checked' : 'unchecked'}
            onPress={() => {
               setChecked(!checked);
            }}
            color={'green'}
            uncheckColor={'red'}
         />
      <Text>Checkbox</Text>
      </SafeAreaView>
   );
};
const styles = StyleSheet.create({
   container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
   },
});
export default MyComponent;

出力