Skip to content

Commit 8b7624f

Browse files
FTD-ZFFTD-ZF
committed
“页面整合”
1 parent b6f715c commit 8b7624f

6 files changed

Lines changed: 146 additions & 177 deletions

File tree

‎src/navigation.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from 'react-navigation';
1313
import { headerOptions, RouteConfigs, } from './commons/components/navConfig';
1414

15-
import { HomeTab, MineTab, DetailsView, CenterView, LoginView, OnePageView, TwoPageView, VideoPage, PlaceHolderPage, FontAdapterPage, LongPicPage } from './root';
15+
import { HomeTab, MineTab, DetailsView, CenterView, LoginView, OnePageView, TwoPageView, VideoPage, PlaceHolderPage, FontAdapterPage, DragListItemPage } from './root';
1616
import { AppColors, AppStyles } from './commons/styles/index';
1717
import CustomTabComponent from './commons/components/Tab';
1818
const TabBarText = {
@@ -161,8 +161,8 @@ const stackNavigators = createStackNavigator(
161161
})
162162
},
163163
},
164-
LongPicPage: {
165-
screen: LongPicPage,
164+
DragListItemPage: {
165+
screen: DragListItemPage,
166166
navigationOptions: props => {
167167
return headerOptions({
168168
...props,
@@ -172,6 +172,8 @@ const stackNavigators = createStackNavigator(
172172
})
173173
},
174174
},
175+
176+
175177
},
176178
{
177179
// // defaultNavigationOptions: ({ navigation }) => {

‎src/pages/center/DragListItem/index.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
* @flow
5+
*/
6+
7+
import React, { Component } from 'react';
8+
import {
9+
Platform,
10+
StyleSheet,
11+
Text,
12+
View,
13+
Image,
14+
TouchableOpacity,
15+
Slider,
16+
Dimensions,
17+
ScrollView,
18+
PixelRatio,
19+
} from 'react-native';
20+
21+
import AppStyles from '../../../commons/styles/styles';
22+
23+
import AppColors from '../../../commons/styles/colors';
24+
import DragSortableView from 'react-native-drag-sort';
25+
import { screen, dFont, aWidth, aHeight, } from '../../../commons/utils/screenUtils';
26+
27+
28+
export default class Index extends Component {
29+
30+
static navigationOptions = ({ navigation }) => ({
31+
headerTitle: 'Item拖动',
32+
});
33+
34+
35+
constructor(props) {
36+
super(props)
37+
38+
this.state = {
39+
firstData: [{ name: '第1' }, { name: '第2' }, { name: '第3' }, { name: '第4' }, { name: '第5' }, { name: '第6' }, { name: '第7' }, { name: '第8' }, { name: '第9' },]
40+
41+
}
42+
}
43+
44+
componentDidMount() {
45+
46+
47+
}
48+
49+
50+
renderDeleteItem(item, index) {
51+
return (
52+
<View style={{ backgroundColor: 'blue', }}>
53+
<View style={{ flexDirection: 'row', paddingRight: 19, width: screen.width, height: 50, alignItems: 'center' }}>
54+
<Text style={{ color: 'red', fontSize: 13 }}>{item.name}</Text>
55+
</View>
56+
<View style={{ height: 0.5, backgroundColor: AppColors.dark9 }} />
57+
</View>
58+
)
59+
}
60+
_keyExtractor = (item, index) => {
61+
return item.name;
62+
63+
};
64+
65+
_changeMoveData(data) {
66+
// if (data.length != this.state.firstData.length) {
67+
this.setState({
68+
firstData: data,
69+
})
70+
// }
71+
}
72+
73+
74+
render() {
75+
76+
return (
77+
<ScrollView
78+
onScrollEndDrag={({ nativeEvent }) => { this.setState({ scrollOffset: nativeEvent.contentOffset['y'] }); }}
79+
onMomentumScrollEnd={({ nativeEvent }) => { this.setState({ scrollOffset: nativeEvent.contentOffset['y'] }); }}
80+
81+
ref={(scrollView) => this.scrollView = scrollView}
82+
scrollEnabled={this.state.scrollEnabled}
83+
style={styles.container}>
84+
<DragSortableView
85+
dataSource={this.state.firstData}
86+
parentWidth={screen.width}
87+
childrenWidth={screen.width}
88+
childrenHeight={51}
89+
scaleStatus={'scaleY'}
90+
onDragStart={(startIndex, endIndex) => {
91+
this.setState({
92+
scrollEnabled: false
93+
})
94+
}}
95+
onDragEnd={(startIndex) => {
96+
this.setState({
97+
scrollEnabled: true
98+
})
99+
}}
100+
onDataChange={(data) => {
101+
if (data.length != this.state.firstData.length) {
102+
this.setState({
103+
firstData: data
104+
});
105+
}
106+
}}
107+
keyExtractor={(item, index) => item.name} // FlatList作用一样，优化
108+
// keyExtractor={this._keyExtractor}
109+
onClickItem={(data, item, index) => {
110+
111+
}}
112+
renderItem={(item, index) => {
113+
return this.renderDeleteItem(item, index)
114+
}}
115+
/>
116+
</ScrollView>
117+
118+
);
119+
}
120+
}
121+
122+
const styles = StyleSheet.create({
123+
container: {
124+
// flex: 1,
125+
// justifyContent: 'center',
126+
// alignItems: 'center',
127+
backgroundColor: '#F5FCFF',
128+
},
129+
130+
131+
});

‎src/pages/center/FontAdapter/longPicPage.js‎

Lines changed: 0 additions & 87 deletions
This file was deleted.

‎src/pages/center/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ export default class Index extends Component {
5555
NavigationService.navigate('FontAdapterPage');
5656
}
5757

58-
_toLongPicPage() {
59-
NavigationService.navigate('LongPicPage')
58+
_dragListItem() {
59+
NavigationService.navigate('DragListItemPage')
6060
}
6161

6262
render() {
@@ -83,8 +83,8 @@ export default class Index extends Component {
8383
<TouchableOpacity style={{
8484
width: '100%', alignItems: 'center', paddingVertical: 20,
8585
backgroundColor: 'yellow', marginTop: 10
86-
}} onPress={() => this._toLongPicPage()}>
87-
<Text style={{ color: 'black', fontSize: 18 }}>长图展示</Text>
86+
}} onPress={() => this._dragListItem()}>
87+
<Text style={{ color: 'black', fontSize: 18 }}>item拖动</Text>
8888
</TouchableOpacity>
8989

9090
</View>

‎src/pages/mine/index.js‎

Lines changed: 3 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,11 @@ import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-ta
1818
import MyTabBar from './MyTabBar';
1919
import { Toast } from 'teaset';
2020

21-
const PhoneWidth = Dimensions.get('window').width;
22-
import DragSortableView from 'react-native-drag-sort';
2321
import { AppColors } from '../../commons/styles';
24-
const { height, width } = Dimensions.get('window');
25-
26-
27-
const parentWidth = width
28-
const childrenWidth = width
29-
const childrenHeight = 51
3022

3123
export default class Index extends Component {
3224
static navigationOptions = ({ navigation }) => ({
33-
// headerTitle: "Mine",
25+
3426
headerTitle: '我的'
3527

3628
})
@@ -40,85 +32,16 @@ export default class Index extends Component {
4032
super(props);
4133

4234
this.state = {
43-
scrollEnabled: true,
44-
scrollOffset: 0,
45-
label2: ['Tab1', 'Tab2', 'Tab3', 'Tab4', 'Tab5', 'Tab6', 'Tab7', 'Tab8'],
46-
firstData: [{ name: '第1' }, { name: '第2' }, { name: '第3' }, { name: '第4' }, { name: '第5' }, { name: '第6' }, { name: '第7' }, { name: '第8' }, { name: '第9' },]
4735
};
4836
}
4937

5038

5139

52-
renderDeleteItem(item, index) {
53-
return (
54-
<View style={{ backgroundColor: 'blue', }}>
55-
<View style={{ flexDirection: 'row', paddingRight: 19, width: width, height: 50, alignItems: 'center' }}>
56-
<Text style={{ color: 'red', fontSize: 13 }}>{item.name}</Text>
57-
</View>
58-
<View style={{ height: 0.5, backgroundColor: AppColors.dark9 }} />
59-
</View>
60-
)
61-
}
62-
_keyExtractor = (item, index) => {
63-
return item.name; // 我的
64-
// const { keyExtractor } = this.props;
65-
// if (keyExtractor) {
66-
// return keyExtractor(item, index);
67-
// }
68-
// return index.toString();
69-
};
70-
71-
_changeMoveData(data) {
72-
// if (data.length != this.state.firstData.length) {
73-
this.setState({
74-
firstData: data,
75-
})
76-
// }
77-
}
7840
render() {
79-
let label2 = this.state.label2;
41+
8042
return (
8143
<View style={styles.container}>
82-
<ScrollView
83-
onScrollEndDrag={({ nativeEvent }) => { this.setState({ scrollOffset: nativeEvent.contentOffset['y'] }); }}
84-
onMomentumScrollEnd={({ nativeEvent }) => { this.setState({ scrollOffset: nativeEvent.contentOffset['y'] }); }}
85-
86-
ref={(scrollView) => this.scrollView = scrollView}
87-
scrollEnabled={this.state.scrollEnabled}
88-
style={styles.container}>
89-
<DragSortableView
90-
dataSource={this.state.firstData}
91-
parentWidth={width}
92-
childrenWidth={width}
93-
childrenHeight={51}
94-
scaleStatus={'scaleY'}
95-
onDragStart={(startIndex, endIndex) => {
96-
this.setState({
97-
scrollEnabled: false
98-
})
99-
}}
100-
onDragEnd={(startIndex) => {
101-
this.setState({
102-
scrollEnabled: true
103-
})
104-
}}
105-
onDataChange={(data) => {
106-
if (data.length != this.state.firstData.length) {
107-
this.setState({
108-
firstData: data
109-
});
110-
}
111-
}}
112-
keyExtractor={(item, index) => item.name} // FlatList作用一样，优化
113-
// keyExtractor={this._keyExtractor}
114-
onClickItem={(data, item, index) => {
115-
116-
}}
117-
renderItem={(item, index) => {
118-
return this.renderDeleteItem(item, index)
119-
}}
120-
/>
121-
</ScrollView>
44+
12245

12346
</View>
12447
);
@@ -130,7 +53,6 @@ export default class Index extends Component {
13053
const styles = StyleSheet.create({
13154
container: {
13255
flex: 1,
133-
13456
backgroundColor: '#F5FCFF',
13557
},
13658

0 commit comments

Comments
 (0)