反応ネイティブのTextInputに対するPanResponder

Question

私はReact-nativeに関する問題に直面しています。私は画面全体を取る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 
    } 

Answer 1

をうん、PanResponderとTextInputを共存させることも可能です。あなたの問題は、いつもパンハンドルからtrueを返すことです。つまり、パンハンドラーが焦点を当てます。

たとえば、私のプロジェクトの1つであるPanResponderは、指を動かすときにイベントをキャプチャしただけでした。しかし、私もTouchableOpacityを内部に持っていたので、PanResponderは常にフォーカスを盗んだ。

これを解決するには、onMoveShouldSetPanResponderCapture関数をカスタムロジックで変更し、常にtrueを返さないようにしてください。だからあなたの場合、私はあなたが何をしているのか分からないが、すべてのパンハンドラーはnativeEventとgestureStateをパラメーターとして取得する。たとえば、カスタムロジックでそれらを使用することができます。

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

これはY軸移動が5つの画素以上である場合にのみ、その後panresponderがフォーカスを取得することを意味する：ここ

は一例です。それ以外の要素、例えばTextInputがフォーカスを取得します。