TextInput은 ScrollView가 스크롤하지 못하도록합니다.

Question

전화의 화면 높이보다 긴 양식이 있습니다. TextInput 구성 요소를 포함하는 ScrollView입니다. 문제는 터치를 시작하여 TextInput에 드래그하려고 할 때 ScrollView이 움직이지 않는다는 것입니다. 빈 공간 (코드 예제에서 View)부터 드래그하면 완벽하게 스크롤됩니다.

TextInput이 어떻게 든 터치/드래그 이벤트를 먹는 것처럼 느껴지므로 ScrollView이 상호 작용할 수 없습니다.

ScrollView이 유사하게 나타납니다

나는 스크롤 작업을 할 수있는 방법

function Form() { 
    return (
     <ScrollView style={{ flex: 1, }}> 
      <TextInput placeholder="test" /> 
      <TextInput placeholder="test" /> 
      <TextInput placeholder="test" /> 
      <TextInput placeholder="test" /> 
      <TextInput placeholder="test" /> 
      <View style={{ height: 150, }} /> 
      <TextInput placeholder="test" /> 
      <TextInput placeholder="test" /> 
      <TextInput placeholder="test" /> 
      <TextInput placeholder="test" /> 
     </ScrollView> 
    ); 
} 

?

업데이트 : 빈 공간을 스크롤하기 시작하면 입력을 터치하여 계속 스크롤 할 수 있습니다. 그러나 관성이 멈추 자마자 입력을 다시 사용하여 스크롤 할 수 없습니다.

Answer 1

Ok, React Native 라이브러리 0.32 버전의 버그입니다. 스크롤링은 0.33에서 예상대로 작동합니다. 그것은 this commit에 의해 해결되었습니다.

Answer 2

업데이트 :이 도움이 될 -

scrollview can't scroll when focus textinput react native이는 <ScrollView> 주위 누락 <View style={{ flex: 1 }}> 포장 될 수 있을까?

나는이 시도하고 내부보기 및 TextInput 구성 요소 모두에서 잘 스크롤 :

render() { 
    return (
     <View style={{ flex: 1 }}> 
      <ScrollView style={{ flex: 1 }} > 
       <TextInput placeholder="this is a textinput with height 200" style={{ borderColor: 'brown', borderWidth: 1, height: 200 }} /> 
       <TextInput placeholder="this is a textinput with height 1200" style={{ borderColor: 'brown', borderWidth: 1, height: 1200 }} /> 
       <View style={{ height: 150, backgroundColor: 'khaki' }} /> 
       <TextInput placeholder="this is a textinput with height 200" style={{ borderColor: 'brown', borderWidth: 1, height: 200 }} /> 
      </ScrollView> 
     </View> 
    ); 
} 

하지만 어쩌면 수도 전체 코드를 공유,보기 구성 요소에서 드래그 때 스크롤 말을하는지부터 무엇인가 계시