Я столкнулся с этой странной проблемой только на Android. Кажется, что два режима прокрутки в одном компоненте моего приложения синхронизированы вместе. Пожалуйста, прочтите до конца. На iOS он работает без проблем.
У меня этот компонент в качестве основы:
Компонент A:
<View style={{flex:1}}>
<View style={{flex:1}}>
<ScrollView>
<View>
<FlatList>
<FlatList>
<FlatList>
</View>
<ScrollView>
</View>
<ComponentB />
</View>
Ниже один ComponentB:
<View style={{position:absolute, top:0, bottom:0, right:0, height:500}}>
<ScrollView>
<View>
Some long content that can be scrolled...
</View>
</ScrollView>
</View>
Я пытаюсь наложить компонент B на компонент A, и оба имеют ScrollViews. Я упростил приведенный выше код. В моем исходном коде я также использую reanimated для анимации компонента B. Но я сталкиваюсь с этой проблемой, даже когда я не использую reanimated, поэтому я упростил код здесь.
Теперь проблема в том, когда Я прокручиваю содержимое на ComponentB, ScrollView компонента A также начинает прокрутку. И это не все! ComponentB прокручивается только до прокручиваемой высоты ComponentA. Если я попытаюсь прокрутить больше, он просто вернется вверх.
Я подумал, что это может быть из-за абсолютного позиционирования, поэтому я попробовал этот код:
<View>
<View style={{height:300}}>
<ScrollView>
<View>
Some long content...
</View>
</ScrollView>
</View>
<View style={{height:300}}>
<ScrollView>
<View>
Some long content...
</View>
</ScrollView>
</View>
</View>
В этом случае также, когда Я прокручиваю любую из полос прокрутки, другая начинает прокручиваться сама по себе. Не знаю, что происходит, но я застрял в данный момент.
ОБНОВЛЕНИЕ: Итак, после тестирования 3-4 реальных Android устройств выяснилось, что эта проблема связана с устройством c. Я столкнулся с этой проблемой только на Xiaomi K20 Pro, на котором установлен Evolution X Custom ROM.