كيف أحول هذا الكود من class component الى function component ؟

أحمد عبد الله2 · 30 أغسطس 2021

import React from 'react';
import {StyleSheet, View, Dimensions, Text, SafeAreaView} from 'react-native';
import Animated from 'react-native-reanimated';
import {PanGestureHandler, State} from 'react-native-gesture-handler';
const {width} = Dimensions.get('window');

const {cond, eq, add, call, set, Value, event, or} = Animated;

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.dragX = new Value(0);
    this.dragY = new Value(0);
    this.absoluteY = new Value(100);
    this.offsetX = new Value(width / 2);
    this.offsetY = new Value(100);
    this.gestureState = new Value(-1);
    this.onGestureEvent = event([
      {
        nativeEvent: {
          // translationX: this.dragX,
          // translationY: this.dragY,
          state: this.gestureState,
          absoluteY: this.absoluteY,
        },
      },
    ]);

    // this.addY = add(this.offsetY, this.dragY);
    // this.addX = add(this.offsetX, this.dragX);
    this.circleY = add(this.absoluteY, new Value(200));

    // this.transX = cond(
    //   eq(this.gestureState, State.ACTIVE),
    //   this.addX,
    //   set(this.offsetX, this.addX)
    // );

    // this.transY = cond(eq(this.gestureState, State.ACTIVE), this.addY, [
    //   set(this.offsetY, this.addY)
    // ]);

    this.state = {dragging: false, y: 0};
  }

  start = ([]) => {
    this.setState({dragging: true});
  };

  moving = ([y, circleY]) => {
    this.setState({y});
  };

  done = ([]) => {
    this.setState({dragging: false});
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Text>y: {this.state.y}</Text>
        <Animated.Code>
          {() => cond(eq(this.gestureState, State.BEGAN), call([], this.start))}
        </Animated.Code>
        <Animated.Code>
          {() =>
            cond(
              eq(this.gestureState, State.ACTIVE),
              call([this.absoluteY, this.circleY], this.moving),
            )
          }
        </Animated.Code>
        <Animated.Code>
          {() =>
            cond(
              or(
                eq(this.gestureState, State.END),
                eq(this.gestureState, State.FAILED),
                eq(this.gestureState, State.CANCELLED),
              ),
              call([], this.done),
            )
          }
        </Animated.Code>
        {this.state.dragging && (
          <Animated.View style={[styles.box, {top: this.circleY}]} />
        )}
        <PanGestureHandler
          maxPointers={1}
          onGestureEvent={this.onGestureEvent}
          onHandlerStateChange={this.onGestureEvent}>
          <Animated.View
            style={[
              // styles.box,
              {
                top: this.absoluteY,
              },
            ]}>
            <Text>hello</Text>
          </Animated.View>
        </PanGestureHandler>
      </SafeAreaView>
    );
  }
}

Salah Eddin Beriani2 · 31 أغسطس 2021

الجزء الأول في التغيير سيكون بسيط وكالتالي

export default function Example() {
 
  const start = ([]) => {
    setState({ dragging: true });
  };

  const moving = ([y, circleY]) => {
    setState({ y });
  };

  const done = ([]) => {
    setState({ dragging: false });
  };


    return (
      <SafeAreaView style={styles.container}>
        <Text>y: {state.y}</Text>
        <Animated.Code>
          {() => cond(eq(gestureState, State.BEGAN), call([], start))}
        </Animated.Code>
        <Animated.Code>
          {() =>
            cond(
              eq(gestureState, State.ACTIVE),
              call([absoluteY, circleY], moving)
            )
          }
        </Animated.Code>
        <Animated.Code>
          {() =>
            cond(
              or(
                eq(gestureState, State.END),
                eq(gestureState, State.FAILED),
                eq(gestureState, State.CANCELLED)
              ),
              call([], done)
            )
          }
        </Animated.Code>
        {state.dragging && <Animated.View style={[styles.box, { top: circleY }]} />}
        <PanGestureHandler
          maxPointers={1}
          onGestureEvent={onGestureEvent}
          onHandlerStateChange={onGestureEvent}
        >
          <Animated.View
            style={[
              // styles.box,
              {
                top: absoluteY,
              },
            ]}
          >
            <Text>hello</Text>
          </Animated.View>
        </PanGestureHandler>
      </SafeAreaView>
    );
  }

أما الجزء الثاني فسيكون مقسم ولنبدأ بأبسط شئ وهو انشاء ال state وتغيير هذا الجزء

 this.state = { dragging: false, y: 0 };

الى

const [state, setState] = React.useState({ dragging: false, y: 0 })

أما هذا الجزء يمكنك أن تضعه في state واحدة

 this.dragX = new Value(0);
    this.dragY = new Value(0);
    this.absoluteY = new Value(100);
    this.offsetX = new Value(width / 2);
    this.offsetY = new Value(100);
    this.gestureState = new Value(-1);
    this.onGestureEvent = event([
      {
        nativeEvent: {

          state: this.gestureState,
          absoluteY: this.absoluteY,
        },
      },
    ]);


    this.circleY = add(this.absoluteY, new Value(200));

  const [info, setInfo] = React.useState({
    dragX: new Value(0),
    dragY: new Value(0),
    absoluteY: new Value(100),
    offsetX: new Value(width / 2),
    offsetY: new Value(100),
    gestureState: new Value(-1),
    onGestureEvent: event([
      {
        nativeEvent: {
          state: new Value(-1),
          absoluteY: new Value(100),
        },
      },
    ]),

    circleY: add(new Value(100), new Value(200)),
  });

وفي المجمل المكون سيكون هكذا

import React from 'react';
import {
  StyleSheet, View, Dimensions, Text, SafeAreaView,
} from 'react-native';
import Animated from 'react-native-reanimated';
import { PanGestureHandler, State } from 'react-native-gesture-handler';

const { width } = Dimensions.get('window');

const {
  cond, eq, add, call, set, Value, event, or,
} = Animated;

export default function Example() {
  const [state, setState] = React.useState({ dragging: false, y: 0 });
  const [info, setInfo] = React.useState({
    dragX: new Value(0),
    dragY: new Value(0),
    absoluteY: new Value(100),
    offsetX: new Value(width / 2),
    offsetY: new Value(100),
    gestureState: new Value(-1),
    onGestureEvent: event([
      {
        nativeEvent: {
          state: new Value(-1),
          absoluteY: new Value(100),
        },
      },
    ]),

    circleY: add(new Value(100), new Value(200)),
  });

  const start = ([]) => {
    setState({ dragging: true });
  };

  const moving = ([y, circleY]) => {
    setState({ y });
  };

  const done = ([]) => {
    setState({ dragging: false });
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text>y: {state.y}</Text>
      <Animated.Code>{() => cond(eq(info.gestureState, State.BEGAN), call([], start))}</Animated.Code>
      <Animated.Code>
        {() => cond(eq(info.gestureState, State.ACTIVE), call([info.absoluteY, info.circleY], moving))}
      </Animated.Code>
      <Animated.Code>
        {() => cond(
          or(
            eq(info.gestureState, State.END),
            eq(info.gestureState, State.FAILED),
            eq(info.gestureState, State.CANCELLED),
          ),
          call([], done),
        )
        }
      </Animated.Code>
      {state.dragging && <Animated.View style={[styles.box, { top: info.circleY }]} />}
      <PanGestureHandler
        maxPointers={1}
        onGestureEvent={info.onGestureEvent}
        onHandlerStateChange={info.onGestureEvent}
      >
        <Animated.View
          style={[
            // styles.box,
            {
              top: info.absoluteY,
            },
          ]}
        >
          <Text>hello</Text>
        </Animated.View>
      </PanGestureHandler>
    </SafeAreaView>
  );
}

كيف أحول هذا الكود من class component الى function component ؟

السؤال

أحمد عبد الله2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Salah Eddin Beriani2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية