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

Question

我正在使用 react native Expo
来自图书馆react-native-paper/checkbox-item Link
我得到了可点击的标签功能，通过点击文本复选框被选中。

I got the tag Checkbox.Itemcode from this Expo Snack Link

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

但是在这，我如何在复选框后面加上标签？

喜欢[复选框]标签

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} />

Working Example