PanResponder在原生反应中的TextInput上

我在React-native上面临一个问题。我有TextInput需要整个屏幕。我想在用户向上或向下滑动时更改此文本输入的内容。为此，我正在使用PanResponder。PanResponder在原生反应中的TextInput上

的问题是，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 
    }

来源

2017-06-02 Ryan Pergent

是啊，很可能是PanResponder和TextInput共存。你的问题是你总是从你的乞丐返回true。这意味着乞丐会获得焦点。

例如，我想要的一个项目PanResponder仅在移动手指时捕获事件。但我也有TouchableOpacity里面，所以PanResponder总是偷走焦点。

要解决此问题，我修改了onMoveShouldSetPanResponderCapture函数与定制逻辑，并不总是返回true。所以在你的情况下，我不知道你在做什么，但所有乞丐得到nativeEvent和gestureState作为参数。所以你可以在你的定制逻辑中使用它们。

下面是一个例子：

onMoveShouldSetPanResponderCapture: (evt, gestureState) => Math.abs(gestureState.dy) > 5

这意味着，如果在Y轴运动是超过5个像素只有panresponder将得到焦点。否则，其他元素，例如您的TextInput将得到关注。

来源

2017-06-03 10:19:57

完美，谢谢！ –

PanResponder在原生反应中的TextInput上

回答

相关问题