Блог

Я создаю компонент класса с анимацией для общей кнопки:

 import React, { Component } from 'react';
import { Text, TouchableOpacity, StyleSheet, Animated, Easing, View } from 'react-native';

class AnimatedPrimaryButton extends Component {
  constructor(props) {
    super(props);

    this.state = {
      toggle: false,
      animated: new Animated.Value(0)
    }
  }

  animatedButton = (toggle) => {
    this.state.animated.setValue(toggle ? 1 : 0);

    Animated.timing(this.state.animated, {
      toValue: toggle ? 0 : 1,
      duration: 250,
      easing: Easing.bounce
    }).start();

    this.setState({ toggle: !toggle });
  }

  render() {
    const { toggle, animated } = this.state;
    const { onPress, disabled, width, height } = this.props;

    return (
      <TouchableOpacity
        disabled={disabled} 
        onPress={onPress} 
        style={[styles.buttonStyle, { width, height }]}
      >
        <Animated.View style={{ 
            // other styles
            transform: [{ scale: animated.interpolate({ inputRange: [0, 1], outputRange: [0, 1]})
              }
            ]
        }}>
        </Animated.View>
        <Text style={[styles.textStyle, { fontSize }]}>
          {children}
        </Text>
      </TouchableOpacity>
    );
  }; 
}

const styles = StyleSheet.create({
  // some styles
});

export default AnimatedPrimaryButton;
  

Я использую компонент create на другом экране, например:

 import AnimatedPrimaryButton from '../Shared/Button/AnimatedPrimaryButton';

doSomething = () => {
  // do something...
}

render() {
  return (
    <View>
      <AnimatedPrimaryButton
        onPress={() => this.doSomething()}
        width={400} 
        height={57} 
        fontSize={20} 
        backgroundColor={confirmButtonBg}
        disabled={disabledConfirmButton}
      >
        {I18n.t('SIGN_IN_BUTTON')}
      </AnimatedPrimaryButton>
    </View>
  );
}
  

Теперь я хочу использовать doSomething функцию и триггер animatedButton одновременно.

В некоторых условиях мой disable переключит значение true или false, поэтому я пытаюсь установить код на моем AnimatedPrimaryButton, который не работает.

 onPress={() => !disabled ? this.animatedButton(toggle) : onPress} 
  

Похоже, что использование реквизита onPress под функцией arrow не сработает.

Как использовать doSomething и animatedButton функцию в компоненте класса AnimatedPrimaryButton ?

Будем признательны за любую помощь.

в AnimatedPrimaryButton компоненте вы можете создать функцию onPress

 onPress(){
  this.props.onPress();
  this. animatedButton();
}
  

и в остальном вы правильно отправляете функцию doSomething () при onPress во время вызова AnimatedPrimaryButton на другом экране.