Is it not possible to change styles through JS in React Native?-CodePudding

Can't RN do style changes using JS?

...
const PR = PanResponder.create({
    onStartShouldSetPanResponder: (e, gestureState) => true,
    onPanResponderStart: (e, gestureState) => {
      console.log("start");
    },
    onPanResponderMove: (e, gestureState) => {
      const dx = Math.abs(gestureState.dx);
      **target.current.style.backgroundColor** = `rgba(${dx},${dx / 2},106,1)`;
    },
    onPanResponderEnd: (e, gestureState) => {
      const dx = Math.abs(gestureState.dx);
      if (!dx) {
        target.current.style.backgroundColor = "green";
      }
      console.log("End");
    },
  });
...

As above, it is difficult to change the style on mobile. Thank you for your reply.

The useState hook was not what I was expecting.

help me..

CodePudding user response：

In the code above it looks like you were storing the style with useRef, which doesnt trigger component updates when its value changes. Here's a useState example

import * as React from 'react';
import { Text, View, StyleSheet, PanResponder } from 'react-native';
import Animated, {
  useSharedValue,
  interpolateColor,
} from 'react-native-reanimated';
import Constants from 'expo-constants';

export default function App() {
  const [style, setStyle] = React.useState({
    borderWidth: 1,
    width: '100%',
    height: 280,
    backgroundColor: 'lightgreen',
  });
  const PR = PanResponder.create({
    onStartShouldSetPanResponder: (e, gestureState) => true,
    onPanResponderStart: (e, gestureState) => {
      console.log('start');
    },
    onPanResponderMove: (e, gestureState) => {
      const dx = Math.abs(gestureState.dx);
      console.log(dx);
      setStyle((prev) => ({
        ...prev,
        backgroundColor: `rgba(${dx},${dx / 2},106,1)`,
      }));
    },
    onPanResponderEnd: (e, gestureState) => {
      const dx = Math.abs(gestureState.dx);
      console.log(dx);
      if (!dx) {
        setStyle((prev) => ({ ...prev, backgroundColor: 'green' }));
      }
      console.log('End');
    },
  });
  return (
    <View style={styles.container}>
      <View style={style} {...PR.panHandlers} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

While it works, the best results would come from using Animated.View and some Animated values

CodePudding user response：

Look into this panResponder . It has some example of how to use PanResponderGestureState in react-native