React Native - 有什么最好的方法可以为每个按钮赋予样式“borderRadius”吗?
React Native - Is there any best way to give the style `borderRadius` each button?
我使用 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
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>
);
};
我使用 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
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>
);
};