Question

当使用来自react-native包中的Animated的PanResponder时出现问题。我要实现的动画是，当用户在顶部方向上滑动手指时，底部栏应平稳向下滑动，直到消失为止。问题是当我向上滑动时，什么也没发生，横杆固定在其位置上。有人可以检查我的代码并告诉我什么地方不对吗？

以下是该应用的屏幕截图：

Screenshot of the app

代码在这里：

App.js：

import { StatusBar } from "expo-status-bar";
import React, { useRef } from "react";
import { View } from "react-native";
import HomeScreen from "./components/screens/HomeScreen";
import BottomTabBar from "./components/bottom_bar/BottomTabBar";
import Constants from "expo-constants";

const { statusBarHeight } = Constants;

export default function App() {
  return (
    <>
      <HomeScreen />
      <BottomTabBar />
    </>
  );
}

Icon.js：

import React from "react";
import { AntDesign } from "@expo/vector-icons";

export default ({ name, isCurrent }) => {
  return (
    <>
      <AntDesign
        name={name}
        size={35}
        color={isCurrent == "true" ? "white" : "grey"}
      />
    </>
  );
};

BottomBar.js：

import React from "react";
import {
  View,
  StyleSheet,
  Animated,
  PanResponder,
  Dimensions,
} from "react-native";
import Icon from "./Icon";

const { width, height } = Dimensions.get("window");

const TABBAR_HEIGHT = 70;

const SNAP_TOP = height - TABBAR_HEIGHT;
const SNAP_BOTTOM = 0;

export default class BottomTabBar extends React.Component {
  constructor(props) {
    super(props);

    const translationY = new Animated.Value(SNAP_TOP);

    const translateY = translationY.interpolate({
      inputRange: [SNAP_BOTTOM, SNAP_TOP],
      outputRange: [SNAP_TOP, SNAP_BOTTOM],
    });

    const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (event, gesture) => {
        if (gesture.dy < 0) {
          translationY.setValue(gesture.dy);
          return true;
        }
      },
      onPanResponderRelease: () => {
        translationY.setValue(SNAP_TOP);
        return true;
      },
    });

    this.state = { panResponder, translateY };
  }

  render() {
    const { panResponder, translateY } = this.state;

    return (
      <Animated.View
        style={{ transform: [{ translateY }] }}
        {...panResponder.panHandlers}
      >
        <View style={styles.container}>
          <Icon name="filter" isCurrent="false" />
          <Icon name="home" isCurrent="true" />
          <Icon name="user" isCurrent="false" />
        </View>
      </Animated.View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: width,
    height: TABBAR_HEIGHT,
    position: "absolute",
    bottom: 0,
    paddingLeft: 10,
    paddingRight: 10,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "rgba(50, 50, 50, 1.0)",
  },
});

import React from "react";
import { View, Text } from "react-native";

export default () => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ fontSize: 25, fontWeight: "bold" }}>Home screen</Text>
    </View>
  );
};

谢谢。

PanResponder无法与react_native中的Animated.View转换一起使用

0 个答案: