React Native Komponente für Checkbox

Blog

React Native Komponente für Checkbox

React Native Komponente für Checkbox

React Native Komponente für Checkbox

Android-Beispiel IOS-Beispiel

Unterstützung

RN-Version Checkbox-Version
> 0,60 >= 0.3 (unterstützt IOS ab 0.4)
<0.60 0.2 (nur Android)

Einstieg

yarn add @react-native-community/checkbox

Deltasee vs Hudi

oder

npm install @react-native-community/checkbox --save

und installiere Kakaoschoten

npx pod-install

Meist automatische Installation

Ab Reaktiv-nativ >= 0.60 kümmert sich Autolinking um den Link

für reaktiv =<0.59.X

react-native link @react-native-community/checkbox

Manuelle Installation

Verknüpfen Sie die Bibliothek manuell auf Android

android/settings.gradle

include ':react-native-community-checkbox' project(':react-native-community-checkbox').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/checkbox/android')

android/app/build.gradle

dependencies { ... implementation project(':react-native-community-checkbox') }

android/app/src/main/.../MainApplication.java

Oben, wo Importe sind:

import com.reactnativecommunity.checkbox.ReactCheckBoxPackage;

Fügen Sie |_+_| . hinzu -Klasse in Ihre Liste der exportierten Pakete.

checkbox

Migration vom Kern |_+_| Modul

Dieses Modul wurde erstellt, als die CheckBox aus dem Kern von React Native herausgelöst wurde. Um zu diesem Modul zu migrieren, müssen Sie die obigen Installationsanweisungen befolgen und dann Ihre Importe ändern von:

@Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new ReactCheckBoxPackage() ); }

zu:

Reagieren Sie Hook-Formulardatei-Upload
react-native

Verwendungszweck

Beispiel

import { CheckBox } from 'react-native'; import CheckBox from '@react-native-community/checkbox';

Weitere Beispiele finden Sie im Beispielprojekt.

Requisiten

Gemeinsame Requisiten

Requisiten ansehen…

Requisitenname Typ Beschreibung
bei Änderung Funktion Wird bei Änderung mit dem nativen Ereignis aufgerufen.
onValueChange Funktion Wird mit dem neuen booleschen Wert aufgerufen, wenn er sich ändert.
Wert boolesch Der Wert des Kontrollkästchens. Wenn wahr, wird das Kontrollkästchen aktiviert. Der Standardwert ist false.
testID Schnur Wird verwendet, um diese Ansicht in End-to-End-Tests zu finden.

Nur Android-Requisiten

Requisitenname Typ Beschreibung
Behinderte boolesch Bei true kann der Benutzer das Kontrollkästchen nicht aktivieren. Der Standardwert ist false.
tintFarben Schnur Ein Objekt mit der folgenden Form: |_+_|. Der Farbwert für |_+_| wird verwendet, wenn das Kontrollkästchen aktiviert ist und der Farbwert für |_+_| wird verwendet, wenn es ausgeschaltet ist.

Nur IOS Requisiten

Requisitenname Typ Beschreibung
Linienbreite boolesch Die Breite der Linien des Häkchens und Kästchens. Standardmäßig auf 2.0.
HideBox boolesch Kontrolle, ob die Box ausgeblendet werden soll oder nicht. Standardwert auf false
boxTyp „Kreis“ oder „Quadrat“ Der zu verwendende Boxtyp. Standardmäßig „Kreis“
TönungFarbe Schnur Die Farbe des Kästchens, wenn das Kontrollkästchen deaktiviert ist. Standardmäßig „#aaaaaa“
onCheckColor Schnur Die Farbe des Häkchens, wenn es aktiviert ist. Standardmäßig „#007aff“
onFillColor Schnur Die Farbe der Innenseite der Box, wenn sie eingeschaltet ist. Standardmäßig transparent
onTintColor Schnur Die Farbe der Linie um das Kästchen, wenn es eingeschaltet ist. Standardmäßig „#007aff“
Animationsdauer Nummer Die Dauer der Animationen in Sekunden. Standardmäßig auf 0,5
onAnimationType „Stroke“ oder „Fill“ oder „Bounce“ oder „Flat“ oder „One-Stroke“ oder „Fade“ Der Animationstyp, der verwendet werden soll, wenn das Kontrollkästchen aktiviert ist. Standardmäßig „Schlaganfall“
offAnimationType „Stroke“ oder „Fill“ oder „Bounce“ oder „Flat“ oder „One-Stroke“ oder „Fade“ Der Animationstyp, der verwendet werden soll, wenn das Kontrollkästchen deaktiviert wird. 'Schlaganfall'

Mitwirkende

Dieses Modul wurde aus |_+_| . extrahiert Ader.

angehende geister amazon fragen

Die Implementierung der IOS-Version, auf die verwiesen wird BEMCheckBox

Download-Details:

Autor: reagieren-native-community

GitHub: https://github.com/react-native-community/react-native-checkbox

#react-native #programmierung #checkbox