資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 React Native 中顯示覆選框？
複選框是我們在 UI 上經常使用的常見元件。我們在 React Native 中有一些很酷的方法來顯示覆選框。
核心 React Native 包不提供複選框支援，您需要安裝一個包才能使用它。
需要安裝以下包來顯示覆選框：
npm install --save-dev react-native-paper
基本的複選框元件如下所示：
<Checkbox status={checkboxstatus} onPress={onCheckboxCheckedfunc} />現在讓我們看看複選框上的一些重要屬性：
| 屬性 | 描述 |
|---|---|
| status | 可以賦予 status 的值為 checked、unchecked 和 indeterminate。 |
| disabled | 值為布林值。可用於啟用/停用複選框。 |
| onPress | 當複選框被選中時將呼叫的函式。 |
| color | 要賦予複選框的顏色 |
| uncheckColor | 複選框在未選中模式下的顏色。 |
這是一個簡單的複選框顯示：
useState 用於設定複選框的選中和未選中狀態，如下所示：
const [checked, setChecked] = React.useState(false);
狀態儲存在 checked 變數中，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;輸出
更新於: 2021-07-01
3K+ 瀏覽量
廣告