javascript - 为按钮组 react native 按钮映射

Question

试图弄清楚如何更改第一个和最后一个按钮的样式。
如何告诉按钮哪个是哪个？
JS 和 React/React Native 的初学者正在努力寻找自己的出路。目前两端都没有圆形按钮。
子元素中的 Button 元素是我自己对 TouchableOpacity 的包装，并且只接受 buttonStyles 的对象。
感谢任何帮助。

父组件:

export class Rating extends React.Component {

  ratings = [
    { text: '1' },
    { text: '2' },
    { text: '3' },
    { text: '4' },
    { text: '5' },
  ];

  onButtonPress = (e) => {
    console.log(e.target.value);
  };

  render() {
    return (
      <View>
        {this.ratings.length && (
          this.ratings.map((rating, index) => (
            <View key={index}>
              <RatingButton rating={rating} onButtonPress={this.onButtonPress} />
            </View>
          ))
        )
      }
      </View>

    );
  }
}

子组件:

const buttonStyles = () => {
  const allButtons = {
    backgroundColor: sc.colors.white.white,
    borderWidth: 1.5,
    borderColor: sc.colors.blue.darker1,
    padding: sc.padding.lg,
  };

  const startButton = {
    borderTopLeftRadius: sc.borderRadius.sm,
    borderBottomLeftRadius: sc.borderRadius.sm,
    borderRightWidth: 0.75,
    ...allButtons,
  };

  const endButton = {
    borderTopRightRadius: sc.borderRadius.sm,
    borderBottomRightRadius: sc.borderRadius.sm,
    borderLeftWidth: 0.75,
    ...allButtons,
  };
  return StyleSheet.create({
    allButtons,
    startButton,
    endButton,
    buttonText: {
      color: sc.colors.blue.darker1,
      fontSize: sc.font.size.largeContent,
    },
  });
};

class RatingButton extends React.Component {

  render() {
    const { onButtonPress, rating } = this.props;
    const styles = buttonStyles();
    return (
      <Button
        buttonStyles={styles.allButtons}
        textStyles={styles.buttonText}
        onPress={onButtonPress}
      >
        {rating.text}
      </Button>
    );
  }
}

Answer 1

在你的 ratings 里面变量，您可以像这样存储样式的另一个属性:

ratings = [
    { text: '1', style: {backgroundColor:'red'} },
    { text: '2' },
    { text: '3' },
    { text: '4' },
    { text: '5', backgroundColor: 'yellow' },
  ];

然后在<RatingButton/>里面您可以将样式添加到元素

<Button
        buttonStyles={styles.allButtons}
        textStyles={styles.buttonText}
        onPress={onButtonPress}
        style={rating.style}
      >
        {rating.text}
</Button>

注意:您也可以通过 rating 传递一个类变量。

ratings = [
    { text: '1', buttonStyle: 'startButton' },
    { text: '2' },
    { text: '3' },
    { text: '4' },
    { text: '5', buttonStyle: 'endButton' },
  ];

然后像这样设置你的风格:

<Button
        buttonStyles={ratings.buttonStyle?styles[rating.buttonStyle]:styles.allButtons}
        textStyles={styles.buttonText}
        onPress={onButtonPress}
        style={rating.style}
      >
        {rating.text}
</Button>