React Native Paper 复选框项目将标签放在复选框之后

Question

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

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

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

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

喜欢 [复选框] 标签

Answer 1

也许回复太晚了，但是复选框项目中有一个名为“位置”的道具，可以采用“前导”或“尾随”值。默认为尾随，如果将其设置为“前导”，则复选框将放置在标签之前。

Answer 2

为此，我建议为复选框制作一个自定义组件

创建一个名为 的文件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} />

工作示例