Реагировать на собственный столбец прокрутки

Question

У меня есть вид, подобный этому

<View style={styles.columnView}>
  <View style={[styles.columnButtonItem, styles.columnC]}><Text></Text></View>
  <View style={[styles.columnButtonItem, styles.columnA]}><Text></Text></View>
  <View style={[styles.columnButtonItem, styles.columnB]}><Text></Text></View>
  <View style={[styles.columnButtonItem, styles.columnE]}><Text>{value}</Text></View>
  <View style={[styles.columnButtonItem, styles.columnAs]}><Text></Text></View>
  <View style={[styles.columnButtonItem, styles.columnT]}><Text></Text></View>
</View>

После итераций я составляю таблицу, подобную этой:

Тамспособ добавить ScroolView на один столбец?Например, я хочу включить прокрутку только на columnE.Очевидно, что когда я прокручиваю столбец E, я хочу прокрутить всю таблицу.

Спасибо

Answer 1

Я (думаю), это то, что вы ищете ... по сути, вы можете прокручивать только крайний правый столбец, а остальные столбцы не прокручиваются.По этой причине вам нужно подождать, пока собственный обработчик событий ScrollView распространит любое изменение, прежде чем отобразить тот факт, что остальные эти 4 столбца прокручиваются.

https://snack.expo.io/@vincentvella/scroll-example

Answer 2

Абсолютно позиционированные просмотры

Если вы знаете ширину столбцов, вы можете использовать абсолютно позиционированные представления, перекрывающие базовый ScrollView, они прекратят все касания ScrollView.Это означает, что он будет прокручивать только ту часть, которая не покрыта абсолютно позиционированными видами.

Так что вы можете сделать что-то вроде этого

render() {
  // set these widths to be the size before row E and the size after row E
  let leftWidth = '33%'; 
  let rightWidth = '33%';
  return (
    <View style={{flex: 1}}>
      <ScrollView style={{flex: 1}}>

        // items for the scroll view go here

      </ScrollView>
      <View style={{position:'absolute', top:0, left: 0, bottom: 0, width: leftWidth}} />
      <View style={{position:'absolute', top:0, right: 0, bottom: 0, width: rightWidth}} />
    </View>
  )
}

Закуска

Вот закуска, демонстрирующая эту реализацию.Я установил backgroundColor для абсолютно позиционированных видов, чтобы вы могли их четко видеть.https://snack.expo.io/@andypandy/partial-scrollview

Предостережение

Основная проблема этого решения заключается в том, что вы не сможете касаться чего-либо, находящегося ниже абсолютно позиционированных видов.Вы могли бы смягчить это, захватывая касания, используя жесты на каждом View, а затем сопоставляя их с позициями на ScrollView.