我正在將 react-native 中的 CheckBox 用于 react-native 專案。
我想將樣式更改為下圖。但是沒有特定的方法可以更改
復選框內的標記。
我不是實作這種風格的專家 UI 開發人員。我嘗試了不同的解決方案來解決這個樣式問題，但我仍然無法解決它。請幫助我找到解決方案。提前致謝。
預期的復選框 UI：
帶有我的樣式的可用 UI：
代碼和樣式如下。
import { CheckBox } from 'react-native';
<CheckBox
value={isItemSelected}
onValueChange={() => [setItemSelection(!isItemSelected),
categorySelectHandler(item.category_name, !isItemSelected)]}
style={styles.checkbox}
onFillColor={"#C4C4C4"}
color={'#FF8300'} />
checkbox: {
alignSelf: "center",
borderRadius: 10,
borderColor: '#C4C4C4',
},
uj5u.com熱心網友回復：
使用@react-native-community/checkbox進行自定義。
import CheckBox from '@react-native-community/checkbox';
<CheckBox
// disabled={disabled}
offAnimationType="stroke"
// onChange={() => setIsOpen(!isOpen)}
onFillColor={'blue'}
onCheckColor={'white'}
// value={checked}
boxType="square"
style={styles.checkbox}
/>
您可以創建一個以相同方式作業的自定義復選框組件，而不是使用 react-native-checkbox。您只需要使用選中的影像和未選中的影像并將其包裝在 Pressable 中。例如 ：
const [checked,setChecked] = useState(false);
<Pressable onPress={()=>setChecked(!checked)}>
<Image source={checked?checkedImage:unCheckedImage} />
</Pressable>
其中選中和未選中的影像是您將匯入的影像。
uj5u.com熱心網友回復：
試試這個庫 np??m i react-native-check-box ，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/511689.html
上一篇：可執行檔案未在雙擊時運行