React native Amimate.视图限制字段

有必要限制蓝色圆圈在红场内的移动

我使用的是React本机文档中的标准示例。我试图用多种方式限制这一领域，但不幸的是，这没有起到任何作用

我的组件代码：

import React，{useRef}来自“React”
从“react native”导入{动画、视图、样式表、PanResponder}
常数芯片=（）=>{
const pan=useRef（新的动画.ValueXY（））.current
const panResponder=useRef(
PanResponder.create({
onMoveShouldSetPanResponder:（）=>true，
onPanResponderGrant:（）=>{
平移偏移量({
x:pan.x.\u值，
y:pan.y.\U值
})
},
onPanResponderMove:Animated.event（[null，{dx:pan.x，dy:pan.y}]，{useNativeDriver:false}），
onPanResponderRelease：（evt，手势状态）=>{
console.log（'gestureState'，gestureState）
pan.offset（）
}
})
).当前
返回(
)
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”
},
方框：{
身高：50，
宽度：50，
背景颜色：“蓝色”，
边界半径：25
}
})
导出{Chip}