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

Question

我正在使用react native Expo
从库react nativepaper/checkbox项目链接
我获得了可点击标签功能，通过点击文本，复选框将被选中。

我得到了标签复选框。项目代码从这个博览会小吃链接

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

工作示例

Answer 2

也许回复太晚了，但有一个名为"位置"；在复选框项目中；前导"；或"；拖尾"；价值默认值是尾随，如果您将其设置为"尾随"；前导"；，复选框将放在标签之前。

Answer 3

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

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