كيف أحول هذا الكود من 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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية