如何制作帶有動畫的自定義單選按鈕？ 反應本機

Question

我在 React Native 中制作了一個自定義的單選按鈕。 下面是我的代碼的鏈接。

https://gist.github.com/shubh007-dev/0d8a0ca4d6f7d1530f3e28d223f9199e

我想要的是在按下單選按鈕時為其設置動畫，就像在這個庫中所做的一樣 - https://www.npmjs.com/package/react-native-simple-radio-button

我第一次能夠為我的單選按鈕設置動畫，但是當我按下另一個單選按鈕時，動畫不會發生。

（此問題的另一種方法）如何確保每個單選按鈕的動畫值都不同？

Answer 1

您要么必須為收音機制作自定義組件，要么為 x 單選按鈕使用 x 動畫變量。

現在，為 x 按鈕設置 x 變量並不是一個有效的解決方案，但如果您只有幾個按鈕，則可以使用它。

您制作了一個呈現平面列表的自定義組件，這就是問題所在； 不能在用於渲染它們的同一組件中單獨為按鈕設置動畫。

您應該拆分代碼並使單選按鈕本身成為一個組件。 類似的東西（沒有測試它，但它應該可以工作）：

export class RadioButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      radioSelected: this.props.selectedItemId,
    };
  }

  radioClick = id => {
    this.setState({ radioSelected: id });
    this.props.onChange(id);
  }

  renderRadioButton = item => {
    const { radioSelected } = this.state;
    const { labelLeftStyle, labelRightStyle, labelOnRight } = this.props;
    return (
      <AnimatedRadio
        {...item}
        isSelected={item.id === radioSelected}
        labelLeftStyle={labelLeftStyle}
        labelRightStyle={labelRightStyle}
        labelOnRight={labelOnRight}
        radioClick={this.radioClick}
      />
    );
  };

  render() {
    return (
      <FlatList
        data={this.props.radioOptions}
        extraData={this.state}
        renderItem={({ item }) => this.renderRadioButton(item)}
        keyExtractor={(item, index) => index.toString()}
      />
    );
  }
}

export class AnimatedRadio extends Component {
  springValue = new Animated.Value(1.1);

  onRadioClick = id => () => {
    const { radioClick } = this.props;
    radioClick(id);
    this.spring();
  };

  spring = () => {
    Animated.spring(this.springValue, {
      toValue: 0.95,
      friction: 2,
      tension: 15,
    }).start();
  };

  render() {
    const {
      id,
      label,
      labelLeftStyle,
      labelRightStyle,
      labelOnRight,
      isSelected,
    } = this.props;
    return (
      <View key={id} style={STYLES.radioContainerView}>
        <TouchableOpacity
          style={STYLES.radioButtonDirectionStyle}
          onPress={this.onRadioClick(id)}
        >
          {labelOnLeft == true ? (
            <Text style={[labelLeftStyle]}>{label}</Text>
          ) : null}

          <View
            style={[isSelected ? STYLES.selectedView : STYLES.unselectedView]}
          >
            {isSelected ? (
              <Animated.View
                style={[
                  STYLES.radioSelected,
                  { transform: [{ scale: this.springValue }] },
                ]}
              />
            ) : null}
          </View>

          {labelOnRight == true ? (
            <Text style={[labelRightStyle]}>{label}</Text>
          ) : null}
        </TouchableOpacity>
      </View>
    );
  }
}

這樣每個組件收音機都有自己的動畫值，並且不會干擾其他按鈕。

Answer 2

我使用LayoutAnimation如下所示。

LayoutAnimation.configureNext({
              duration: 300,
              create: {
                type: 'linear',
                property: 'scaleXY',
              },
              update: {
                type: 'spring',
                springDamping: 0.4,
                property: 'opacity',
              },
              delete: {
                type: 'easeOut',
                property: 'opacity',
              },
            });