react-native - React Native Paper Checkbox Item 在复选框之后放置标签

Question

我正在使用 react native Expo
从库react-native-paper/checkbox-item 链接
我得到了可点击的标签功能，通过点击文本复选框被选中。

我从这个 Expo Snack Link 获得了标签 Checkbox.Itemcode

<Checkbox.Item label="Item" status="checked" />

但是在这方面，我如何在复选框之后放置标签？

喜欢 [ 复选框 ] 标签

标签： react-nativecheckboxexporeact-native-paper

Answer 1

为此，我建议为 CheckBoxes 制作一个自定义组件

创建一个名为 的文件CheckBox.js，它应该如下所示

import * as React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { Checkbox } from 'react-native-paper';

function CheckBox({ label, status, onPress }) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <Checkbox status={status} />
        <Text style={{ fontWeight: 'bold' }}>{label}</Text>
      </View>
    </TouchableOpacity>
  );
}

export default CheckBox;

然后在需要时使用它。

import CheckBox from './CheckBox'; // Make sure you import it correctly

<CheckBox label="Name" status="checked" onPress={null} />

工作示例