React Native Paper复选框项目在复选框后右侧放置标签

oxf4rvwz  于 2023-06-24  发布在  React
关注(0)|答案(3)|浏览(147)

我正在使用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" />

但是在这个例子中,我如何在复选框后面加上标签?
喜欢[复选框]标签

bqjvbblv

bqjvbblv1#

为此,我建议为CheckBox创建一个自定义组件
创建一个名为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

o4hqfura

o4hqfura2#

也许是太晚了回复,但在Checkbox项中有一个名为“position”的 prop ,它可以接受“leading”或“trailing”值。默认值为拖尾,如果您将其设置为“前导”,则复选框将放在标签之前。

qyyhg6bp

qyyhg6bp3#

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

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

相关问题