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

Question

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

我从这个世博小吃链接中获得了标签Checkbox.Itemcode

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

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

喜欢[复选框]标签

Answer 1

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

Answer 2

为此，我建议为 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} />

工作示例

Answer 3

无需创建自定义组件的解决方案

style={{ justifyContent: 'flex-start' }}
labelStyle={{ textAlign: 'left', flexGrow: 0 }}
position="leading"

Answer 4

只是使用 Checkbox.Item 和 flexDirection “row”或“row-reverse”作为方向。

  <Checkbox.Item
       mode="android"
       style={{
           flexDirection:"row" || "row-reverse
            }}

https://callstack.github.io/react-native-paper/docs/components/Checkbox/CheckboxItem