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上

回答

相關問題