react native：如何在也标记复选框的复选框旁边放置一个标签？答案

【问题标题】：react native : How to put a label next to the checkbox that also marks the checkbox?react native：如何在也标记复选框的复选框旁边放置一个标签？
【发布时间】：2021-06-05 10:16:14
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs react-native checkbox

【解决方案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 上的示例

【讨论】：

现在效果如何？我添加了一个工作示例作为答案的更新

【解决方案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>`

【讨论】：