react-native - React Native - 有没有最好的方法给每个按钮的样式“borderRadius”？

Question

我使用 创建了三个按钮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>
  );
};

你能告诉我最好的编码方式吗？

Answer 1

旧解决方案：改用三元运算符。

更新：创建一个辅助函数并仅对第一个和最后一个按钮使用圆角样式。

工作示例：世博小吃

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>
  );
};