React Native Touchable отключает ScrollView

Я новичок в React Native, поэтому, наверное, прошу что-то очень очевидное, но, пожалуйста, помогите.

У меня есть представление, обернутое в осязаемое, так что вся область реагирует на нажатие. Затем запустите ScrollView внутри вставки. Общая структура выглядит примерно так:

<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
    <View>
        <ScrollView>
            <Text>Hello, here is a very long text that needs scrolling.</Text>
        <ScrollView>
    </View>
</TouchableWithoutFeedback>

Когда это компилируется и выполняется, обнаружение нажатия, но прокрутка не прокручивается вообще. Я сделал приведенный выше код коротким и простым, но у каждого компонента есть правильный стиль, и я вижу, что все отлично обрабатывается, а длинный текст обрезается в нижней части ScrollView. Пожалуйста, помогите.

Спасибо!

Ответы

Ответ 1

У вас может быть scrollView или FlatList внутри TouchableWithoutFeedback. Ты не должен, но несколько раз у тебя нет другого выбора. Взглянув на эти вопросы и ответ подтверждая это. закрыть встроенный модальный щелчок по наложению, как отклонить модальный, нажав экран в ответном режиме.

Для вопроса, единственный способ заставить его работать (по крайней мере, я знаю), или самый простой способ добавить TouchableOpacity вокруг текста в ваш код, как это,

 <TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
    <View>
        <ScrollView>
          <TouchableOpacity>
            <Text>Hello, here is a very long text that needs scrolling.</Text>
          </TouchableOpacity>
        <ScrollView>
    </View>
</TouchableWithoutFeedback>

Примечание. TouchableOpacity - это оболочка для того, чтобы заставить Views реагировать должным образом, так что вы можете легко стилизовать его так, как если бы вы ввели свой компонент View Component, а затем установите некоторые из его специальных реквизитов для того, что вы хотите, например, activeOpacity и т.д. Moreso вы можете использовать TouchableHighlight работает, но получает один дочерний элемент, то есть вы вставляете весь свой компонент внутри родительского.

Ответ 2

I'm using this structure it working for me:

<TouchableWithoutFeedback onPress={() => {}}>
    {other content}   
    <View onStartShouldSetResponder={() => true}>
        <ScrollView>
            {scrollable content}
        </ScrollView>
    </View>
</TouchableWithoutFeedback>

Ответ 3

Thats write, вы не можете иметь вид прокрутки внутри TouchableWithoutFeedback, это свойство реагировать на native, что оно отключит его, вместо этого вы можете просмотреть свой прокрутки вне вкладки TouchableWithoutFeedback и добавить другое содержимое, которое вы хотите щелкнуть внутри тега представления.

Вы также можете использовать Touchable Highlights, если TouchableWithoutFeedback не работает.

Ответ 4

Я думаю, что использование scrollview не очень хорошо в вашем коде. Вы можете обернуть scrollview внутри представления как

<View>
  <ScrollView>
      <TouchableX>
        <View>
           <Text></Text>
        </View>
      </TouchableX>

  </ScrollView>
</View>