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
         */
    }