Question

如何在也标记复选框的复选框旁边放置标签？

import CheckBox from '@react-native-community/checkbox';
            <CheckBox
              value={Selected}
              onValueChange={() => checkAll()}
              tintColors={{ true: Colors.background_color, false: 'black' }}
            />

Answer 1

您可以将它们都放在 TouchableOpacity 中并将 flexDirection 设置为如下所示的行：

<TouchableOpacity style={{flexDirection:'row'}} onPress={checkTheBox}>
            <CheckBox
              value={Selected}
              onValueChange={() => checkAll()}
              tintColors={{ true: Colors.background_color, false: 'black' }}
            />
<Text>Lable</Text>
</TouchableOpacity>

Snack 上的示例

Answer 2

您可以制作自定义复选框。希望这对你有很大帮助

<TouchableOpacity onPress={() => handleCheckbox(myItem, item)} style={{flexDirection: 'row', alignItems: "center", marginBottom: myItem.index < item.item.answers.length-1 ? 10 : 0}}>
            <Icon name={(item.index == 0 && checkboxArray && checkboxArray[myItem.index] )? "checkbox-outline" : (item.index == 8 && checkboxQ8Array && checkboxQ8Array[myItem.index] ) ? "checkbox-outline" : 'square-outline'} size={25} color={colors.THEME} />
            <Text style={{width: '90%',  marginLeft: 10, fontSize: 14,  color: 'black', fontWeight: '400'}}>{myItem.item.answer}</Text>
          </TouchableOpacity>`

react native：如何在复选框旁边放置一个标签，该标签也标记了复选框？

2 个答案: