如何在React Native中制作可滚动的拖放网格?

时间:2019-04-25 21:35:48

标签: react-native

我正在尝试创建一个像默认Flatlist一样可滚动的网格,但是具有拖放功能以对元素进行重新排序。

current grid screenshot 我使用的react-native-draggable-grid几乎是完美的,只是无法使网格可滚动。我是本机的新手,不胜感激!

在完成基本的本机init初始化之后,我安装了DraggableGrid软件包。 我的App.js看起来像这样:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, FlatList} from 'react-native';
import {DraggableGrid} from 'react-native-draggable-grid';

type Props = {};
export default class App extends Component<Props> {
  users=[
    { key: '1', nameval: '1' },
    { key: '2', nameval: '2' },
    { key: '3', nameval: '3' },
    { key: '4', nameval: '4' },
    { key: '5', nameval: '5' },
    { key: '6', nameval: '6' },
    { key: '7', nameval: '7' },
    { key: '8', nameval: '8' },
    { key: '9', nameval: '9' },
    { key: '10', nameval: '10' }
  ];

  render() {
    return (
      <View style={styles.container}>
        <DraggableGrid data={this.users} numColumns={2}
          renderItem={({item})=>
            <View style={{width:150, height:150, backgroundColor:'#AA0022'}}>
              <Text>item</Text>
            </View>
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#00FCFF',
  }
});

在我不尝试将元素拖动到屏幕底部时,拖放功能有效。我原以为它会自动向下滚动并显示其他元素,但这没有发生。网格根本无法滚动。

我当时正在考虑将整个DraggableGrid放在ScrollView中,但是我担心那样就不会有单元可重用性(例如在Android RecyclerView中)

0 个答案:

没有答案