React Родной вложенный ScrollView блокировки

Я пытаюсь вложить ScrollViews в React Native; горизонтальный свиток с вложенными вертикальными свитками.React Родной вложенный ScrollView блокировки

Вот пример:

var Test = React.createClass({ 
    render: function() { 
     return (
      <ScrollView 
       style={{width:320, height:568}} 
       horizontal={true} 
       pagingEnabled={true}> 

       {times(3, (i) => { 
        return (
         <View style={{width:320, height:568}}> 

          <ScrollView> 
           {times(20, (j) => { 
            return (
             <View style={{width:320, height:100, backgroundColor:randomColor()}}/> 
            ); 
           })} 
          </ScrollView> 

         </View> 
        ); 
       })} 

      </ScrollView> 
     ); 
    }, 
}); 

AppRegistry.registerComponent('MyApp',() => Test);

Внешний скроллер работает безупречно, но внутренние один палочки, когда вы касаетесь его, пока он движется. Я имею в виду: если вы прокрутите, поднимите свой палец и коснитесь его снова, пока он все еще движется с импульсом, он останавливается и не реагирует вообще, чтобы коснуться движений. Чтобы прокрутить больше, вам нужно снова поднять палец и снова коснуться.

Это настолько воспроизводимое, что это похоже на что-то связанное с Жестким Ответчиком.

Кто-нибудь видел эту проблему?

Как бы я даже начал отлаживать это? Есть ли способ увидеть, что реагирует на прикосновения, предоставление и освобождение, и когда?

Спасибо.

Update:

Похоже, это система Ответчика, поставив onResponderMove слушателей на внутренние и внешние скроллерах:

<ScrollView 
    onResponderMove={()=>{console.log('outer responding');}} 
    ... 

    <ScrollView 
     onResponderMove={()=>{console.log('inner responding');}}> 
     ...

Это ясно, что внешний ScrollView захватывает контроль. Вопрос, я думаю, заключается в том, как остановить внешний скроллер от контроля при попытке прокрутки по вертикали? И почему это происходит только при попытке прокрутить уже движущийся внутренний ScrollView?

источник

2015-04-20 nicholas

Вы видите это поведение в t он тоже симулятор? Не сразу понятно, что вы пытаетесь сделать здесь, практически говоря - может быть, есть более простой метод. –

Да. Случается и в симуляторе. Хорошим примером того, что я ищу, является Gilt. Вы можете перемещаться по вертикали через продукты и горизонтально через категории. Еще один - Netflix, хотя и обратный, поскольку у них есть несколько горизонтальных прокруток внутри вертикального. – nicholas

Вы нашли решение на этом? Я не хочу изменять основной код. – TYRONEMICHAEL

Изменить node_modules/react-native/Libraries/Components/ScrollResponder.js: Строка 136 (См UPDATE):

scrollResponderHandleScrollShouldSetResponder: function(): boolean { 
    return this.state.isTouching; 
},

UPDATE: Я считаю, если вид прокрутки в настоящее время анимации и хочет стать ответчиком, то он будет отвергать. Строка 189 в ScrollResponder.js. Так что я изменить линию 340 и это работает для меня:

scrollResponderIsAnimating: function(): boolean { 
    // var now = Date.now(); 
    // var timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime; 
    // var isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS || 
    // this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime; 
    // return isAnimating; 
    return false; 
},

Вы можете увидеть здесь: https://github.com/facebook/react-native/issues/41

источник

2015-05-14 07:52:25

Это работает как шарм для меня !!!!!!! Большое спасибо!!! ты моя спасательная жизнь! –

это сумасшедший взлом, но он работает для меня, спасибо – Cherniv

В вашем panresponder для внутренней один, попробуйте установить это:

onPanResponderTerminationRequest:() => false

источник

2015-09-17 19:19:48

Это сделало трюк для меня и для SliderIOS. –

Я получаю это сообщение об ошибке: «Предупреждение: ScrollView не принимает отклонения хорошо - свитки в любом случае». У ScrollView, похоже, есть особые привилегии, в которых ему не нужно слушать. Есть ли другой вариант? –

Обертывание прокручивать содержимое вложенного ScrollView с исправленным для меня на Android-телефоне:

<ScrollView> 
    ... 
    <ScrollView horizontal> 
    <TouchableWithoutFeedback> 
     { /* your scrollable content goes here */ } 
    </TouchableWithoutFeedback> 
    </ScrollView> 
</ScrollView>

источник

2017-01-19 23:09:15 IlyaDoroshin

не помог мне :(используя RN 0.40 – ColCh

@ColCh, может быть, у меня немного другая разметка .. – IlyaDoroshin

не сработал для меня –

React Родной вложенный ScrollView блокировки

ответ

Смежные вопросы