Блог

Я пытаюсь обновить Плоский список, чтобы представить его так, как показано в этом видео: https://www.youtube.com/watch?v=6XxpUhQqpjY

Мои элементы включают в себя осязаемые компоненты, такие как ввод текста и кнопки.

Это отлично работает в iOS. Однако на Android плоский список прокручивается с помощью функции FlingGesture, но ни один из осязаемых компонентов не реагирует на прикосновение. Когда я нажимаю на текстовый ввод, клавиатура не вызывается.

Я использую NativeBase и навигацию по реакции, если это полезно.

 <Content>
 <FlingGestureHandler key='up'
  direction={Directions.UP}
  onHandlerStateChange={ev => { if (ev.nativeEvent.state === State.END) {
      //setActiveIndex()
      if (activeIndex === data.length -1) {
        return
      }
      setActiveIndex(activeIndex   1)
    }
  }}
  >

  <FlingGestureHandler
  key='down'
  direction={Directions.DOWN}
  onHandlerStateChange={ev => {if (ev.nativeEvent.state === State.END) {
      //setActiveIndex()
      if (activeIndex === 0) {
        return
      }
      setActiveIndex(activeIndex - 1)
    }
  }}
  >
  <FlatList
  scrollEnabled={false}
  removeClippedSubviews={false}
  refreshControl={<RefreshControl refreshing={games.loadingGames}
  onRefresh={onRefresh} />}
  contentContainerStyle={{
    flex: 5,
    justifyContent: 'flex-start',
    padding: SPACING * 2
  }}
  style={{minHeight: Dimensions.get('screen').height-240}}
  data={games.sort((a,b) => {
      return (b.status === a.status) ? new Date(a.startDateTime) - new Date(b.startDateTime) : new Date(b.startDateTime) - new Date(a.startDateTime)
    })}
  CellRendererComponent={({item, index, children, style, ...props}) => {
    // console.log(`props`, props)
    const newStyle = [
      style,
      { zIndex: games.length - index }
    ]
    return (
      <View style={newStyle} index={index} {...props}>
        {children}
      </View>
    )
  }}
  keyExtractor={(item) => item.gameId.toString()}
  renderItem={({item, index}) => {
    const inputRange = [index -1, index, index   1]
    const translateY = scrollXAnimated.interpolate({
      inputRange,
      outputRange: [50, 0, -100]
    })
    const scale = scrollXAnimated.interpolate({
      inputRange,
      outputRange: [.8, 1, 1.3]
    })  
    const opacity = scrollXAnimated.interpolate({
      inputRange,
      outputRange: [1 - 1/VISIBLE_ITEMS, 1, 0]
    })
    const game = item
    return index >= activeIndex amp;amp; index < activeIndex 2 amp;amp; (
      <GameItem
        style={{
          minHeight: ITEM_HEIGHT,
          minWidth: ITEM_WIDTH,
          opacity,
          transform: [
            {
              translateY,
            },
            { scale },
          ],
        }}
        onLayout={getItemDimensions}
        game={game}
        selectGame={selectGame}
        onChangeText={onChangeScore}
        onChangeStars={onChangeStars}
        onSubmit={submitPrediction} />
    )
  }}
/>
  </FlingGestureHandler>
  </FlingGestureHandler>
</Content>
 

Я перепробовал множество различных решений, но, похоже, не могу решить эту проблему.