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

チェックボックスは、UI でよく使用される一般的なコンポーネントです。クールなものもいくつかあります Reactnativeでチェックボックスを表示する方法です。

コアの反応ネイティブ パッケージはチェックボックスをサポートしていないため、チェックボックスをインストールする必要があります。 それを使用するためのソフトウェア パッケージ。

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

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

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

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

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

#Props##status可能な値ステータスを与えるように設定されるのは チェックあり、チェックなし、未定義。 Disabled値はブール値です。として使用できます チェックボックスを有効/無効にします。 onPressボタンが押されたときに呼び出される関数 チェックボックスがオンになっています。 チェックボックスに割り当てられた色チェックされていないチェックボックスの色 これは単純なチェック ボックスの表示です -useState は、チェック ボックスのオン/オフの状態を設定するために使用されます。 -

#Description th>
	#Color
	uncheckColor

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

以下のステータスはchecked変数に保存され、setCheckedメソッドが使用されます 更新してください。

ユーザーがチェックボックスをオンまたはオフにすると、チェックされた状態が図のように更新されます。 以下 -

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

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

Example

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 ? &#39;checked&#39; : &#39;unchecked&#39;}
            onPress={() => {
               setChecked(!checked);
            }}
            color={&#39;green&#39;}
            uncheckColor={&#39;red&#39;}
         />
      <Text>Checkbox</Text>
      </SafeAreaView>
   );
};
const styles = StyleSheet.create({
   container: {
      flex: 1,
      justifyContent: &#39;center&#39;,
      alignItems: &#39;center&#39;
   },
});
export default MyComponent;

出力

以上がReactnativeでチェックボックスを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。