React-Native ScrollView не прокручивается - PullRequest
Новая
       72

React-Native ScrollView не прокручивается

0 голосов
/ 01 мая 2020

Я использую эту библиотеку act-native-draggable-flatlist . У меня есть ScrollView внутри этого перетаскиваемого плоского списка, который не работает. Когда я переключаюсь на draggableFlatList на FlatList и удаляю TouchableOpacity, это работает. Но я хочу использовать этот перетаскиваемый плоский список!

Он не прокручивается горизонтально. Однако, если я перехожу на FlatList, он работает (очень медленно). 

import React, { Component } from 'react';
import { View, TouchableOpacity, Text, FlatList } from 'react-native';
import DraggableFlatList from 'react-native-draggable-flatlist';

const exampleData = [...Array(20)].map((d, index) => ({
  key: `item-${index}`, // For example only -- don't use index as your key!
  label: index,
  backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${index *
    5}, ${132})`,
}));

class Example extends Component {
  state = {
    data: exampleData,
  };

  renderItem = ({ item, index, drag, isActive }) => {
    return (
      <TouchableOpacity
        style={{
          height: 100,
          backgroundColor: isActive ? 'blue' : item.backgroundColor,
          alignItems: 'center',
          justifyContent: 'center',
        }}
        onLongPress={drag}>
        <Text
          style={{
            fontWeight: 'bold',
            color: 'white',
            fontSize: 32,
          }}>
          {item.label}
        </Text>
      </TouchableOpacity>
    );
  };

  renderHorizontalItem = () => {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          horizontal
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => `draggable-item-${item.key}`}
          onDragEnd={({ data }) => this.setState({ data })}
        />
      </View>
    );
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <DraggableFlatList
          data={this.state.data}
          renderItem={this.renderHorizontalItem}
          keyExtractor={(item, index) => `draggable-item-${item.key}`}
          onDragEnd={({ data }) => this.setState({ data })}
        />
      </View>
    );
  }
}

export default Example;
...