Reactnativeでチェックボックスを表示するにはどうすればよいですか?-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-08-27 22:57:01

転載

1207 人が閲覧しました

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

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

#Description


	#Color
	uncheckColor
< /td>

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

Example

import * as React from &#39;react&#39;;
import { StyleSheet, Text, SafeAreaView } from &#39;react-native&#39;;
import { Checkbox } from &#39;react-native-paper&#39;;
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 サイトの他の関連記事を参照してください。