React-Native ScrollView不滚动

时间:2020-04-30 22:57:16

标签: react-native react-native-flatlist react-native-scrollview react-native-draggable-flatlist

我正在使用此库react-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;

0 个答案:

没有答案