Skip to content

Commit 42880a5

Browse files
mochixuanmochixuan
committed
Add adaptive height and width
1 parent 0c2ed26 commit 42880a5

File tree

10 files changed

+1441
-7
lines changed

10 files changed

+1441
-7
lines changed

‎Example/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {SortAndFixedPage} from "./app/container/SortAndFixedPage";
1212
import {DragDeletePage} from "./app/container/DragDeletePage";
1313
import AutomaticSlidingOnePage from "./app/container/AutomaticSlidingOnePage";
1414
import AutomaticSlidingThreePage from "./app/container/AutomaticSlidingThreePage";
15+
import AnyThreePage from "./app/container/AnyThreePage";
1516

1617
const App = StackNavigator({
1718
MainPage: {screen: MainPage},
@@ -25,6 +26,7 @@ const App = StackNavigator({
2526
DragDeletePage: {screen: DragDeletePage},
2627
AutomaticSlidingOnePage: {screen: AutomaticSlidingOnePage},
2728
AutomaticSlidingThreePage: {screen: AutomaticSlidingThreePage},
29+
AnyThreePage: {screen: AnyThreePage}
2830
},{
2931
navigationOptions: {
3032
gesturesEnabled: true

‎Example/app/MainPage.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ export default class MainPage extends Component{
1717
<SafeAreaView>
1818
<ScrollView>
1919
<View style={styles.container}>
20+
{
21+
this.renderButtonStyle('AnyThreePage', () => {
22+
this.props.navigation.navigate('AnyThreePage')
23+
})
24+
}
2025
{
2126
this.renderButtonStyle('AutomaticSlidingOnePage', () => {
2227
this.props.navigation.navigate('AutomaticSlidingOnePage')

‎Example/app/container/AnyThreePage.js‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
import React,{createRef} from 'react';
2+
import {
3+
Text,
4+
TouchableOpacity,
5+
StyleSheet,
6+
View,
7+
Image,
8+
Dimensions,
9+
SafeAreaView
10+
} from 'react-native';
11+
import AnySizeDragSortableView from '../widget/AnySizeDragSortableView'
12+
13+
const {width} = Dimensions.get('window')
14+
const headerViewHeight = 160
15+
const bottomViewHeight = 40
16+
17+
const getW = (index, isWidth) => isWidth ? index % 3 === 0 ? (width - 40) : (width - 60) / 2 : 80;
18+
// const getW = (index, isWidth) => 120 + Math.floor((Math.random() - 0.5) * 100);
19+
// const getW = (index, isWidth) => 150;
20+
21+
export default class App extends React.Component {
22+
constructor(props) {
23+
super(props);
24+
const items = []
25+
for (let i = 0; i < 26; i++) {
26+
items.push({
27+
text: String.fromCharCode(65 + i),
28+
width: getW(i, true),
29+
height: getW(i, false)
30+
})
31+
}
32+
this.state = {
33+
items,
34+
movedKey: null
35+
};
36+
37+
this.sortableViewRef = createRef()
38+
}
39+
40+
onDeleteItem = (item, index) => {
41+
const items = [...this.state.items]
42+
items.splice(index, 1)
43+
this.setState({ items })
44+
}
45+
46+
_renderItem = (item, index, isMoved) => {
47+
const {movedKey} = this.state
48+
return (
49+
<TouchableOpacity
50+
onLongPress={() => {
51+
this.setState({movedKey: item.text})
52+
this.sortableViewRef.current.startTouch(item, index)
53+
}}
54+
onPressOut = {() => this.sortableViewRef.current.onPressOut()}
55+
>
56+
<View style={[styles.item_wrap, {opacity: (movedKey === item.text && !isMoved) ? 1 : 1}]}>
57+
{
58+
<View style={styles.item_clear_wrap}>
59+
<TouchableOpacity onPress={() => this.onDeleteItem(item, index)}>
60+
<Image source={require('../data/img/clear.png')} style={styles.item_clear}/>
61+
</TouchableOpacity>
62+
</View>
63+
}
64+
<View style={[styles.item, {width: item.width, height: item.height, backgroundColor: isMoved ? 'red' : '#f39c12'}]}>
65+
{
66+
isMoved ? (
67+
<View style={styles.item_icon_swipe}>
68+
<Image source={require('../data/img/animal1.png')} style={styles.item_icon}/>
69+
</View>
70+
) : null
71+
}
72+
<View style={styles.item_text_swipe}>
73+
<Text style={styles.item_text}>{item.text}</Text>
74+
</View>
75+
</View>
76+
</View>
77+
</TouchableOpacity>
78+
)
79+
}
80+
81+
render() {
82+
const { items } = this.state;
83+
const renderHeaderView = (
84+
<View style={styles.aheader}>
85+
<Image source={{uri: 'https://avatars0.githubusercontent.com/u/15728691?s=460&v=4'}} style={styles.aheader_img}/>
86+
<View style={styles.aheader_context}>
87+
<Text style={styles.aheader_title}>mochixuan</Text>
88+
<Text style={styles.aheader_desc}>Android, React-Native, Flutter, React, Web。Learn new knowledge and share new knowledge.</Text>
89+
</View>
90+
</View>
91+
)
92+
const renderBottomView = (
93+
<View style={styles.abottom}>
94+
<Text style={styles.abottom_desc}>yarn add react-native-drag-sort</Text>
95+
</View>
96+
)
97+
return (
98+
<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
99+
<View style={styles.header}>
100+
<Text style={styles.header_title}>AnySize</Text>
101+
</View>
102+
<AnySizeDragSortableView
103+
ref={this.sortableViewRef}
104+
dataSource={items}
105+
keyExtractor={(item) => item.text}
106+
renderItem={this._renderItem}
107+
onDataChange={(data, callback)=> {
108+
this.setState({items: data},()=>{
109+
callback()
110+
})
111+
}}
112+
renderHeaderView = {renderHeaderView}
113+
headerViewHeight={headerViewHeight}
114+
renderBottomView = {renderBottomView}
115+
bottomViewHeight={bottomViewHeight}
116+
movedWrapStyle={styles.item_moved}
117+
onDragEnd={()=>{
118+
this.setState({
119+
movedKey: null
120+
})
121+
}}
122+
/>
123+
</SafeAreaView>
124+
);
125+
}
126+
}
127+
128+
const styles = StyleSheet.create({
129+
item_wrap: {
130+
position: 'relative',
131+
paddingLeft: 20,
132+
paddingTop: 20
133+
},
134+
item: {
135+
justifyContent: 'space-around',
136+
alignItems: 'center',
137+
backgroundColor: '#f39c12',
138+
borderRadius: 4,
139+
},
140+
item_clear_wrap: {
141+
position: 'absolute',
142+
left: 10,
143+
top: 10,
144+
width: 20,
145+
height: 20,
146+
zIndex: 999
147+
},
148+
item_clear: {
149+
width: 20,
150+
height: 20
151+
},
152+
item_moved: {
153+
opacity: 0.95,
154+
borderRadius: 4,
155+
},
156+
item_icon_swipe: {
157+
width: 50,
158+
height: 50,
159+
backgroundColor: '#fff',
160+
borderRadius: 50 * 0.5,
161+
justifyContent: 'center',
162+
alignItems: 'center',
163+
},
164+
item_icon: {
165+
width: 30,
166+
height: 30,
167+
resizeMode: 'contain',
168+
},
169+
item_text_swipe: {
170+
backgroundColor: '#fff',
171+
width: 56,
172+
height: 30,
173+
borderRadius: 15,
174+
justifyContent: 'center',
175+
alignItems: 'center',
176+
},
177+
item_text: {
178+
color: '#444',
179+
fontSize: 20,
180+
fontWeight: 'bold',
181+
},
182+
header: {
183+
height: 48,
184+
justifyContent: 'center',
185+
alignItems: 'center',
186+
borderBottomColor: '#2ecc71',
187+
borderBottomWidth: 2,
188+
},
189+
header_title: {
190+
color: '#333',
191+
fontSize: 24,
192+
fontWeight: 'bold'
193+
},
194+
aheader: {
195+
height: headerViewHeight,
196+
flexDirection: 'row',
197+
borderBottomColor: '#2ecc71',
198+
borderBottomWidth: 2,
199+
zIndex: 100,
200+
backgroundColor: '#fff'
201+
},
202+
aheader_img: {
203+
width: headerViewHeight * 0.6,
204+
height: headerViewHeight * 0.6,
205+
resizeMode: 'cover',
206+
borderRadius: headerViewHeight * 0.3,
207+
marginLeft: 16,
208+
marginTop: 10,
209+
},
210+
aheader_context: {
211+
marginLeft: 8,
212+
height: headerViewHeight * 0.4,
213+
marginTop: 10
214+
},
215+
aheader_title: {
216+
color: '#333',
217+
fontSize: 20,
218+
marginBottom: 10,
219+
fontWeight: 'bold'
220+
},
221+
aheader_desc: {
222+
color: '#444',
223+
fontSize: 16,
224+
width: width - headerViewHeight * 0.6 - 32
225+
},
226+
abottom: {
227+
justifyContent: 'center',
228+
alignItems: 'center',
229+
height: bottomViewHeight,
230+
backgroundColor: '#fff',
231+
zIndex: 100,
232+
borderTopColor: '#2ecc71',
233+
borderTopWidth: 2,
234+
},
235+
abottom_desc: {
236+
color: '#333',
237+
fontSize: 20,
238+
fontWeight: 'bold'
239+
}
240+
});

0 commit comments

Comments
 (0)