import React,{Component} from 'react'
import {
ActivityIndicator,
StatusBar,
StyleSheet,
ScrollView,
View,
Image,
Text,
Dimensions
} from 'react-native';
const {width} = Dimensions.get('window')
import DragSortableView from 'react-native-drag-sort'
const parentWidth = width - 18
const childrenWidth = 76
const childrenHeight = 76
const marginChildrenTop = 7
const marginChildrenBottom = 0
const marginChildrenLeft = 0
const marginChildrenRight = 7
export default class DragTestScreem extends Component {
constructor(props) {
super(props);
this.state = {
data: ['cat', 'fish', 'beans', 'tree','child','ant','mountain'],
scrollEnabled: false,
}
}
renderItem (word, index) {
return (
<View style={sortStyles.itemContainer}>
<Text>{word}</Text>
</View>
)
}
// Render any loading content that you like here
render() {
return (
<View style={styles.container}>
<ScrollView
ref={(scrollView)=> this.scrollView = scrollView}
scrollEnabled = {this.state.scrollEnabled}
style={{flex: 1}}>
<View style={sortStyles.container}>
<DragSortableView
dataSource={this.state.data}
parentWidth={parentWidth}
childrenWidth= {childrenWidth}
childrenHeight={childrenHeight}
marginChildrenTop={marginChildrenTop}
marginChildrenBottom={marginChildrenBottom}
marginChildrenLeft={marginChildrenLeft}
marginChildrenRight={marginChildrenRight}
onDragStart={(startIndex,endIndex)=>{
this.setState({
scrollEnabled: false
})
}}
onDragEnd={(startIndex)=>{
this.setState({
scrollEnabled: true
})
}}
onDataChange = {(data)=>{
// delete or add data to refresh
if (data.length != this.state.data.length) {
this.setState({
data: data
})
}
}}
onClickItem={(data,item,index)=>{
console.log('clicked')
// click delete
// if (this.state.isEnterEdit) {
// const newData = [...data]
// newData.splice(index,1)
// this.setState({
// data: newData
// })
// }
}}
renderItem={(item,index)=>{
return this.renderItem(item,index)
}}
/>
</View>
</ScrollView>
</View>
);
}
}
const sortStyles = StyleSheet.create({
container: {
borderColor: '#000000',
borderWidth: 4,
padding: 10
},
itemContainer: {
borderColor: '#F0F3F7',
borderRadius: 8,
borderWidth: 4,
paddingHorizontal: 12,
paddingVertical: 12,
width: childrenWidth,
height: childrenHeight,
backgroundColor: '#f0ffff',
justifyContent: 'center',
alignItems: 'center'
},
word: {
color: '#162842',
fontSize: 15,
fontWeight: 'bold',
}
})
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
padding: 20
},
})It doesn't drag.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent