Блог

Я создал три кнопки, используя map , а 1-я и 3-я кнопки расположены 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 amp;amp; styles.selected,

              // This is the part I doubt
              index === 0 amp;amp; styles.btnLeft,
              index === 1 amp;amp; styles.btnMiddle,
              index === 2 amp;amp; styles.btnRight,
            ]}
            onPress={() => setBtnClicked(index)}
          >
            <Text
              style={[
                styles.textStyle,
                btnClicked === index amp;amp; 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 amp;amp; styles.selected,
        buttonStyle(index),
      ]}
      onPress={() => setBtnClicked(index)}>
      <Text
        style={[styles.textStyle, btnClicked === index amp;amp; styles.selectedText]}>
        {type}
      </Text>
    </TouchableOpacity>
  );
};