使用 React Native 在手势启动时运行 RTK 调度

Question

这是我的代码：

import {
  Button,
  FlatList,
  NativeSyntheticEvent,
  Text,
  TextInput,
  TextInputFocusEventData,
  View,
} from "react-native";
import { MissionStoreType } from "../../types/Missions.types";
import { globalStyles } from "../../styles/globals.styles";
import { useAppDispatch, useAppSelector } from "../../redux/app/hooks";
import {
  MissionSelector,
  addMission,
  convertToChild,
  editMissionTitle,
  focusedMissionSelector,
  openMissionChildren,
  removeMission,
  setFocusedMission,
} from "../../redux/features/MissionsSlice";
import {
  Directions,
  Gesture,
  GestureDetector,
} from "react-native-gesture-handler";

interface MissionProps {
  id: string;
  index: number;
  nestLevel: number;
}

const Mission: React.FC<MissionProps> = ({
  id,
  nestLevel,
  index,
}: MissionProps) => {
  const dispatch = useAppDispatch();
  const mission: MissionStoreType = useAppSelector(MissionSelector(id));
  const focusedMission = useAppSelector(focusedMissionSelector);

  const rightFling = Gesture.Fling()
    .enabled(index > 0)
    .direction(Directions.RIGHT)
    .onStart(() => {
      dispatch(convertToChild({ id, index })); // convertToChild is empty action! (didnt do anything...)
    });

  const leftFling = Gesture.Fling()
    .enabled(nestLevel > 0)
    .direction(Directions.LEFT)
    .onStart(() => console.log("fling left"));

  const gestures = Gesture.Simultaneous(rightFling, leftFling);

  const handleTextInputBlur = () => {
    dispatch(setFocusedMission(null));
    if (mission.text === "") dispatch(removeMission({ id, index }));
  };

  return (
    <GestureDetector gesture={gestures}>
      <View>
        <View style={globalStyles.rowContainer}>
          <View style={{ width: nestLevel * 20 }} />
          <Button
            title="del"
            onPress={() => dispatch(removeMission({ id, index }))}
          />
          <TextInput
            onFocus={() => dispatch(setFocusedMission(id))}
            onBlur={handleTextInputBlur}
            style={globalStyles.flex1}
            value={mission.text}
            onChangeText={(text) => dispatch(editMissionTitle({ id, text }))}
            onSubmitEditing={() => dispatch(addMission({ id, index }))}
            autoFocus={focusedMission === id}
          />
          {mission.children.length > 0 && (
            <Button
              title="open"
              onPress={() => dispatch(openMissionChildren(id))}
            />
          )}
        </View>
        {mission.open && mission.children.length > 0 && (
          <FlatList
            data={mission.children}
            keyExtractor={(item) => item}
            renderItem={({ item, index: childrenIndex }) => (
              <Mission
                id={item}
                nestLevel={nestLevel + 1}
                index={childrenIndex}
              />
            )}
          />
        )}
      </View>
    </GestureDetector>
  );
};

export default Mission;

我使用 Expo 来运行我的应用程序。 当我在任务中向右滑动时，我尝试进行一些商店更改，但是，我的应用程序完全崩溃了.. 它可能是什么？ 谢谢！

我尝试使用 React Native 中的 runOnJS 和 runOnUI 函数。 起初我有一些状态改变，但我将它们全部删除以查看是否存在问题。

Answer 1

所以，这解决了我的问题：

const rightFling = Gesture.Fling()
.enabled(index > 0)
.direction(Directions.RIGHT)
.onStart(runOnJS(() => dispatch(convertToChild({ id, index }))));

它可能与React Native中的js和ui线程有关..