我在 React-native 上遇到了一个问题。我有 TextInput
这需要整个屏幕。当用户向上或向下滑动时,我想更改此文本输入的内容。为此,我使用了 PanResponder
.
问题在于PanResponder
从TextInput
抢夺焦点: 当我点击 TextInput
,键盘不会出现,我无法更改其值。
有没有办法同时拥有 PanResponder
和 Textinput
共存,这样一个水龙头就会聚焦在TextInput
并且滑动仍会触发 PanResponder
回调?
我将代码减少到重现问题所需的最低限度:
export default class EditNoteScreen extends Component {
componentWillMount() {
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onStartShouldSetPanResponderCapture: () => true,
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true
});
}
render() {
return (
<View style={stylesNote.editScreen} {...this.panResponder.panHandlers}>
<View style={stylesNote.editScreenContent}>
<TextInput style={stylesNote.editScreenInput}>
Hello
</TextInput>
</View>
</View>
);
}
}
款式:
editScreen: {
flex: 1
},
editScreenContent: {
flex: 5
},
editScreenInput: {
flex: 1,
borderColor: "transparent",
paddingLeft: 20,
paddingRight: 10
}
最佳答案
是的,有可能 PanResponder
和 TextInput
共存。你的问题是你总是返回true
来自你的乞丐。这意味着乞讨者获得了焦点。
例如我想要的项目之一 PanResponder
仅在移动手指时捕获事件。但我也有 TouchableOpacity
里面也是如此PanResponder
总是偷走焦点。
为了解决这个问题,我修改了 onMoveShouldSetPanResponderCapture
具有自定义逻辑的函数而不总是返回 true
.所以在你的情况下,我不知道你在做什么,但所有乞讨者都得到 nativeEvent
和 gestureState
作为参数。例如,您可以在自定义逻辑中使用它们。
下面是一个例子:
onMoveShouldSetPanResponderCapture: (evt, gestureState) => Math.abs(gestureState.dy) > 5
这意味着如果 y 轴移动超过 5 个像素,则 panresponder 才会获得焦点。否则其他元素,例如您的
TextInput
将获得焦点。
关于react-native - react 原生中 TextInput 上的 PanResponder,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44338147/