如何在reactnative中显示复选框？-js教程-PHP中文网

如何在reactnative中显示复选框？

WBOY

发布： 2023-08-27 22:57:01

转载

1207 人浏览过

复选框是我们在 UI 上经常使用的常见组件。我们确实有一些很酷的在reactnative中显示复选框的方法。

核心react-native包不支持复选框，您需要安装一个软件包才能使用它。

必须安装以下软件包才能显示复选框 -

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

登录后复制

基本的复选框组件如下 -

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

登录后复制

现在让我们看看复选框上的一些重要属性 -

Props	描述
status	可以设置的值赋予状态的是已选中、未选中和不确定。
已禁用	值为布尔值。可用于启用/禁用复选框。
onPress	按下按钮时将调用的函数复选框已选中。
颜色	为复选框指定的颜色
uncheckColor< /td>	未选中复选框的颜色

这是一个简单的复选框显示 -

useState 用于设置复选框的选中、未选中状态：显示下面 -

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

登录后复制

状态保存在checked变量中，setChecked方法用于更新它。

当用户选中/取消选中复选框时，选中的状态将更新，如图所示下面 -

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

登录后复制

完整代码如下 -

示例

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中显示复选框？

以上是如何在reactnative中显示复选框？的详细内容。更多信息请关注PHP中文网其他相关文章！