react-native - 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>
);
};
你能告诉我最好的编码方式吗?
解决方案
旧解决方案:改用三元运算符。
更新:创建一个辅助函数并仅对第一个和最后一个按钮使用圆角样式。
工作示例:世博小吃
import React, { useState, useEffect } from 'react';
import {
Text,
View,
StyleSheet,
TouchableOpacity,
FlatList,
} from 'react-native';
import Constants from 'expo-constants';
const styles = StyleSheet.create({
row: {
flexDirection: 'row',
justifyContent: 'flex-end',
marginRight: 15,
marginTop: 15,
},
btnWrap: {
width: 50,
height: 24,
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'pink',
justifyContent: 'center',
alignItems: 'center',
margin: -2,
},
textStyle: {
fontSize: 10,
fontWeight: 'normal',
color: 'pink',
},
btnLeft: {
borderTopLeftRadius: 6,
borderBottomLeftRadius: 6,
},
btnRight: {
borderTopRightRadius: 6,
borderBottomRightRadius: 6,
},
selected: {
backgroundColor: 'black',
},
selectedText: {
color: 'white',
},
});
const pointType = ['one', 'two', 'three', 'four', 'five', 'six'];
export default MypagePoint = ({ totalPoint }) => {
const [btnClicked, setBtnClicked] = useState(null);
const buttonStyle = (index) => {
if (index === 0) return styles.btnLeft;
else if (index === pointType.length - 1) return styles.btnRight;
};
return (
<View style={[styles.container]}>
<View style={[styles.row, { marginBottom: 15 }]}>
{pointType.map((type, index) => (
<Button
index={index}
btnClicked={btnClicked}
buttonStyle={buttonStyle}
setBtnClicked={setBtnClicked}
type={type}
/>
))}
</View>
</View>
);
};
const Button = ({ index, btnClicked, buttonStyle, setBtnClicked, type }) => {
return (
<TouchableOpacity
style={[
styles.btnWrap,
btnClicked === index && styles.selected,
buttonStyle(index),
]}
onPress={() => setBtnClicked(index)}>
<Text
style={[styles.textStyle, btnClicked === index && styles.selectedText]}>
{type}
</Text>
</TouchableOpacity>
);
};
推荐阅读
- android-studio - Android Studio 中无法识别 Dart 关键字“await”
- c++ - 向量的最后一个成员在 Rcpp 中没有给出正确的结果
- python - 将新列写入 CSV
- mysql - MYSQL:触发器(现在。'#Column')
- linux - 命名管道,2 个孩子之间的通信
- html - 如何使用 GmailApp 设置电子邮件正文文本颜色
- scheme - SICP 1.45 - 为什么这两个高阶函数不等价?
- php - 如果我在简码中使用 get_template_part,则无法编辑页面
- php - Laravel 5.6 中用于排队电子邮件的动态 SMTP 数据?
- python - 无法使用部署到 Heroku 的 django 应用程序访问 postgreSQL 中的 object.id(内部服务器错误 500)