如何解决React Native - 有没有最好的方法来为每个按钮设置“borderRadius”样式?
我使用 map
创建了三个按钮,第一个和第三个按钮的侧面有 borderRadius
。
这是它的样子:
尽管我按预期显示了按钮,但我觉得这段代码应该比我做的更好。另外,我不太确定以这种方式映射按钮是否可以..
我的代码如下:
const styles = StyleSheet.create({
row: {
flexDirection: 'row',justifyContent: 'flex-end',marginRight: 15,marginTop: 15,},btnWrap: {
width: 50,height: 24,backgroundColor: colors.white_two,borderWidth: 0.5,borderColor: colors.very_light_pink_five,justifyContent: 'center',alignItems: 'center',textStyle: {
fontSize: 10,fontWeight: 'normal',color: colors.very_light_pink_five,btnLeft: {
borderTopLefTradius: 6,borderBottomLefTradius: 6,btnRight: {
borderTopRighTradius: 6,borderBottomrighTradius: 6,btnMiddle: {
borderLeftWidth: 0,borderRightWidth: 0,selected: {
backgroundColor: colors.black,selectedText: {
color: colors.white_two,});
const pointType = ['one','two','three'];
const MypagePoint = ({ totalPoint }) => {
const [btnClicked,setBtnClicked] = useState(null);
return (
<View style={[styles.container]}>
<View style={[styles.row,{ marginBottom: 15 }]}>
{pointType.map((type,index) => (
<TouchableOpacity
style={[
styles.btnWrap,btnClicked === index && styles.selected,// This is the part I doubt
index === 0 && styles.btnLeft,index === 1 && styles.btnMiddle,index === 2 && styles.btnRight,]}
onPress={() => setBtnClicked(index)}
>
<Text
style={[
styles.textStyle,btnClicked === index && styles.selectedText,]}
>
{type}
</Text>
</TouchableOpacity>
))}
</View>
</View>
);
};
你能告诉我最好的编码方式吗?
解决方法
旧解决方案:改用三元运算符。
更新:创建一个辅助函数并仅对第一个和最后一个按钮使用圆角样式。
工作示例:Expo Snack
private void doImportKeyStore() throws Exception {
if (alias != null) {
doImportKeyStoreSingle(loadSourceKeyStore(),alias);
} else {
if (dest != null || srckeyPass != null) {
throw new Exception(rb.getString(
"if.alias.not.specified.destalias.and.srckeypass.must.not.be.specified"));
}
doImportKeyStoreAll(loadSourceKeyStore());
}
/*
* Information display rule of -importkeystore
* 1. inside single,shows failure
* 2. inside all,shows sucess
* 3. inside all where there is a failure,prompt for continue
* 4. at the final of all,shows summary
*/
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。