我正在制作一个React原生应用程序,场景如下:

我已经阅读了PanResponderAnimated API的文档(多次),但找不到任何实现这一点的东西,也找不到其他实现类似功能的人.

在panresponder事件中的约束?

onPanResponderMove: Animated.event([null,{
    dx: this.state.pan.x,  //Some function here to constrain the value?
    dy: this.state.pan.y
}]),

在应用变换时进行约束?

style = {
    transform: {
        transformX: ...,//Use interpolate to constrain the values somehow?
        transformY: ...
    }
}

推荐答案

使用extrapolateextrapolateRightextrapolateLeft属性:

const maxX = 200;
const constrainedX = this.state.pan.x.interpolate({
  inputRange: [0, maxX],
  outputRange: [0, maxX],
  extrapolateRight: 'clamp'
})

https://facebook.github.io/react-native/docs/animations.html#interpolation

React-native相关问答推荐

PubNubReact无法工作,因为它已被废弃

React本机组件未更新状态

使用下拉菜单时react 本机react-native-dropdown-select-list,它会将下面的项目向下移动.如何阻止这种情况发生

是否有用于react-native 的简单同步存储选项?

react native条件渲染

React Native WebView 中的 Javascript console.log()

react-native 中的layout-only view removal优化是什么?

Invariant Violation:requireNativeComponent: "RNCWebView" was not found in the UIManager

react native 中 componentDidMount 和 componentDidUpdate 有什么区别

未找到 xcode 'boost/config/user.hpp' 文件

Firebase检测用户是否存在

Undefined 不是判断 this.state.* 的对象

React-Native Android - 找不到 com.android.tools:common

在配置 react-native-maps 中获取 "supportLibVersion" 、 "playServicesVersion" 和 "androidMapsUtilsVersion" 值

词法或预处理器问题 - 未找到 event2/event-config.h 文件

react native如何访问文件系统?

React native + redux-persist:如何忽略键(黑名单)?

创建新的 react-native 元素时出现Unexpected token import错误

如何在 React Native 中从底部滑入和滑出

React Native:无法解析模块 fs