Skip to content

Commit 054b1be

Browse files
TrustDecTrustDec
committed
Login state
1 parent 266b84c commit 054b1be

File tree

9 files changed

+160
-69
lines changed

9 files changed

+160
-69
lines changed

‎ios/AwesomeProject.xcodeproj/project.pbxproj‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1495,6 +1495,10 @@
14951495
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
14961496
MTL_ENABLE_DEBUG_INFO = YES;
14971497
ONLY_ACTIVE_ARCH = YES;
1498+
OTHER_LDFLAGS = (
1499+
"-Objc",
1500+
"-all_load",
1501+
);
14981502
SDKROOT = iphoneos;
14991503
};
15001504
name = Debug;
@@ -1531,6 +1535,10 @@
15311535
GCC_WARN_UNUSED_VARIABLE = YES;
15321536
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
15331537
MTL_ENABLE_DEBUG_INFO = NO;
1538+
OTHER_LDFLAGS = (
1539+
"-Objc",
1540+
"-all_load",
1541+
);
15341542
SDKROOT = iphoneos;
15351543
VALIDATE_PRODUCT = YES;
15361544
};
@@ -1568,6 +1576,10 @@
15681576
GCC_WARN_UNUSED_VARIABLE = YES;
15691577
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
15701578
MTL_ENABLE_DEBUG_INFO = NO;
1579+
OTHER_LDFLAGS = (
1580+
"-Objc",
1581+
"-all_load",
1582+
);
15711583
SDKROOT = iphoneos;
15721584
VALIDATE_PRODUCT = YES;
15731585
};

‎src/modules/PopupDialog.js‎

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,38 @@ import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
44
import PopupDialog, { SlideAnimation, DialogTitle, ScaleAnimation, DialogButton } from 'react-native-popup-dialog';
55

66
const dialogTitle = props => <DialogTitle {...props} />;
7-
class PopupDialogView extends Component {
8-
render() {
9-
return (
10-
<PopupDialog {...this.props} dialogStyle={{ overflow: 'hidden' }}>
11-
{this.props.children}
12-
<View style={{ flexDirection: 'row', position: 'absolute', bottom: 0 }}>
13-
{this.props.cancelBtn && (
14-
<TouchableOpacity
15-
activeOpacity={0.6}
16-
onPress={this.props.cancelBtn.onPress}
17-
style={[styles.container, { backgroundColor: this.props.cancelBtn.bgColor }]}>
18-
<Text style={styles.buttonTitle}>{this.props.cancelBtn.title}</Text>
19-
</TouchableOpacity>
20-
)}
21-
{this.props.confirmBtn && (
22-
<TouchableOpacity
23-
activeOpacity={0.6}
24-
disabled={this.props.confirmBtn.disabled}
25-
onPress={this.props.confirmBtn.onPress}
26-
style={[styles.container, { backgroundColor: this.props.confirmBtn.bgColor }]}>
27-
<Text style={styles.buttonTitle}>{this.props.confirmBtn.title}</Text>
28-
</TouchableOpacity>
29-
)}
30-
</View>
31-
</PopupDialog>
32-
);
33-
}
34-
}
7+
const Button = props => (
8+
<TouchableOpacity
9+
disabled={props.disabled || false}
10+
activeOpacity={0.6}
11+
onPress={props.onPress}
12+
style={[styles.container, { backgroundColor: props.bgColor }]}>
13+
<Text style={styles.buttonTitle}>{props.title}</Text>
14+
</TouchableOpacity>
15+
);
16+
const PopupDialogView = props => (
17+
<PopupDialog {...props}>
18+
{props.children}
19+
<View style={{ flexDirection: 'row', position: 'absolute', bottom: 0 }}>
20+
{props.cancelBtn && (
21+
<Button
22+
onPress={props.cancelBtn.onPress}
23+
bgColor={props.cancelBtn.bgColor}
24+
title={props.cancelBtn.title}
25+
/>
26+
)}
27+
{props.confirmBtn && (
28+
<Button
29+
disabled={props.confirmBtn.disabled}
30+
onPress={props.confirmBtn.onPress}
31+
bgColor={props.confirmBtn.bgColor}
32+
title={props.confirmBtn.title}
33+
/>
34+
)}
35+
</View>
36+
</PopupDialog>
37+
);
38+
3539
const scaleAnimation = new ScaleAnimation();
3640
const actions = [];
3741
PopupDialog.propTypes = {
@@ -46,11 +50,12 @@ PopupDialog.propTypes = {
4650
confirmBtn: PropTypes.object,
4751
cancelBtn: PropTypes.object,
4852
overlayOpacity: PropTypes.number,
49-
overlayBackgroundColor: PropTypes.string
53+
overlayBackgroundColor: PropTypes.string,
54+
dialogStyle: PropTypes.object
5055
};
5156
PopupDialog.defaultProps = {
52-
width: 0.9,
53-
height: 300,
57+
width: 100,
58+
height: 100,
5459
show: false,
5560
dismissOnTouchOutside: false,
5661
dialogAnimation: scaleAnimation,
@@ -59,7 +64,8 @@ PopupDialog.defaultProps = {
5964
confirmBtn: null,
6065
cancelBtn: null,
6166
overlayOpacity: 0.7,
62-
overlayBackgroundColor: '#000'
67+
overlayBackgroundColor: '#000',
68+
dialogStyle: { overflow: 'hidden' }
6369
};
6470
const styles = StyleSheet.create({
6571
container: {

‎src/navigators/index.js‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,21 +55,12 @@ class ReduxNavigation extends Component {
5555
addListener,
5656
theme
5757
});
58+
const confirmBtn = dialog.confirmBtn || {};
59+
const cancelBtn = dialog.cancelBtn || {};
5860
return (
5961
<View style={{ flex: 1 }}>
6062
<AppNavigator navigation={navigation} />
61-
<PopupDialog
62-
show={dialog.isShow}
63-
confirmBtn={{
64-
title: 'set dark',
65-
bgColor: '#188eee',
66-
disabled: theme.id === 'dark',
67-
onPress: this.props.setTheme
68-
}}
69-
cancelBtn={{ title: '关闭按钮', bgColor: '#9DABC0', onPress: this.props.hideDialog }}
70-
dialogTitle={dialog.dialogTitle}>
71-
{dialog.children}
72-
</PopupDialog>
63+
<PopupDialog {...dialog}>{dialog.children}</PopupDialog>
7364
</View>
7465
);
7566
}

‎src/page/DialogModules/Login.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { Component } from 'react';
2+
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
3+
export default class LoginDialog extends Component {
4+
render() {
5+
return (
6+
<View style={styles.centering}>
7+
<ActivityIndicator animating={true} size="large" />
8+
<Text style={styles.loginStateTitle}>正在登录</Text>
9+
</View>
10+
);
11+
}
12+
}
13+
14+
const styles = StyleSheet.create({
15+
centering: {
16+
flex: 1,
17+
alignItems: 'center',
18+
justifyContent: 'center'
19+
},
20+
loginStateTitle: {
21+
textAlign: 'center',
22+
fontSize: 16,
23+
marginTop: 5,
24+
color: '#fff'
25+
}
26+
});

‎src/page/Login/index.js‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
44
import LinearGradient from 'react-native-linear-gradient';
55
import InputAccessoryView from 'InputAccessoryView';
66
import { NavigationActions } from 'react-navigation';
7+
import * as dialogType from '../../redux/actions/dialogType';
78
const {
89
Alert,
910
AlertIOS,
@@ -17,7 +18,9 @@ const {
1718
LayoutAnimation,
1819
TextInput,
1920
Button,
20-
TouchableOpacity
21+
TouchableOpacity,
22+
Keyboard,
23+
InteractionManager
2124
} = ReactNative;
2225
type Props = {};
2326
type State = {};
@@ -39,12 +42,18 @@ class LoginScreen extends Component<Props, State> {
3942
console.log(text);
4043
};
4144
onLogin = () => {
45+
this.props.showDialog();
4246
const resetAction = NavigationActions.reset({
4347
index: 0,
4448
actions: [NavigationActions.navigate({ routeName: 'RootScreen' })]
4549
});
46-
LayoutAnimation.linear();
47-
this.props.navigation.dispatch(resetAction);
50+
setTimeout(() => {
51+
this.props.hideDialog();
52+
InteractionManager.runAfterInteractions(() => {
53+
this.props.navigation.dispatch(resetAction);
54+
LayoutAnimation.linear();
55+
});
56+
}, 2000);
4857
};
4958
render() {
5059
return (
@@ -75,7 +84,7 @@ class LoginScreen extends Component<Props, State> {
7584
</View>
7685
<InputAccessoryView nativeID={inputAccessoryViewID} backgroundColor="#fffffff7">
7786
<View style={styles.textInputContainer}>
78-
<Button onPress={() => alert(1)} title="Send" />
87+
<Button onPress={() => Keyboard.dismiss()} title="确定" />
7988
</View>
8089
</InputAccessoryView>
8190
</View>
@@ -103,8 +112,7 @@ const styles = StyleSheet.create({
103112
},
104113
buttonTitle: {
105114
color: '#fff',
106-
fontSize: 17,
107-
fontFamily: 'PingFangTC-Medium'
115+
fontSize: 17
108116
},
109117
textInputContainer: {
110118
flexDirection: 'row'
@@ -116,8 +124,7 @@ const styles = StyleSheet.create({
116124
borderColor: 'rgba(255,255,255,.5)',
117125
borderRadius: 6,
118126
color: '#f1f1f1',
119-
fontSize: 16.5,
120-
fontFamily: 'PingFangTC-Medium'
127+
fontSize: 16.5
121128
},
122129
text: {
123130
padding: 10,
@@ -139,4 +146,13 @@ const inputOption = {
139146
placeholderTextColor: 'rgba(255,255,255,.7)'
140147
};
141148
LoginScreen.navigationOptions = () => ({ header: null });
142-
export default connect()(LoginScreen);
149+
const mapStateToProps = state => {
150+
return {};
151+
};
152+
const mapDispatchToProps = (dispatch, ownProps) => {
153+
return {
154+
showDialog: () => dispatch(dialogType.LOGIN_DIALOG),
155+
hideDialog: () => dispatch(dialogType.HIDE_DIALOG)
156+
};
157+
};
158+
export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);

‎src/page/Root.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,10 +120,18 @@ class LoginScreenView extends Component {
120120
actions: [NavigationActions.navigate({ routeName: 'NavigationBar' })]
121121
});
122122
//LayoutAnimation.configureNext(customAnimationConfig);
123+
LayoutAnimation.spring();
123124
this.props.navigation.dispatch(resetAction);
124125
console.log(this.props);
125126
}
126127
};
128+
showDialog = () => {
129+
const diaOptin = dialogType.LOGINMN_DIALOG;
130+
diaOptin.confirmBtn.disabled = this.props.theme.id === 'dark';
131+
diaOptin.confirmBtn.onPress = this.props.setTheme;
132+
diaOptin.cancelBtn.onPress = this.props.hideDialog;
133+
this.props.showDialog(diaOptin);
134+
};
127135
onCheckForUpdate = () => {
128136
ToastView.showCustom('检测更新');
129137
CodePush.checkForUpdate(CONFIG.CODEPUS_KEY)
@@ -187,9 +195,9 @@ class LoginScreenView extends Component {
187195
onClick={() => this.props.navigation.navigate('HomeScreen')}
188196
title={'进入案例区'}
189197
bgColor="#C0392C"
190-
/>
198+
/>dialogType.LOGINMN_DIALOG
191199
<Button onClick={this.onCheckForUpdate} title={'检测更新'} bgColor="#16A085" />
192-
<Button onClick={this.props.showDialog} title={'Dialog'} bgColor="#188eee" />
200+
<Button onClick={this.showDialog} title={'Dialog'} bgColor="#188eee" />
193201
<Button
194202
onClick={() => {
195203
SyanImagePicker.showImagePicker(
@@ -259,8 +267,9 @@ const mapStateToProps = state => {
259267
const mapDispatchToProps = (dispatch, ownProps) => {
260268
return {
261269
actions: bindActionCreators(actionCreators, dispatch),
262-
showDialog: () => dispatch(dialogType.LOGIN_DIALOG),
270+
showDialog: option => dispatch(option),
263271
hideDialog: () => dispatch(dialogType.HIDE_DIALOG),
272+
setTheme: () => dispatch({ type: 'DARK_THEME' }),
264273
setDefaultTheme: () => dispatch({ type: 'DEFAULT_THEME' })
265274
};
266275
};

‎src/page/home/index.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,14 @@ class HomeScreen extends Component {
2727
openWebView = () => {
2828
this.props.navigation.navigate('OpenWebViewScreen');
2929
};
30+
showDialog = () => {
31+
console.log(this.props);
32+
const diaOptin = dialogType.HOME_DIALOG;
33+
diaOptin.confirmBtn.disabled = this.props.theme.id === 'dark';
34+
diaOptin.confirmBtn.onPress = this.props.setTheme;
35+
diaOptin.cancelBtn.onPress = this.props.hideDialog;
36+
this.props.showDialog(dialogType.HOME_DIALOG);
37+
};
3038
render() {
3139
return (
3240
<ScrollView>
@@ -67,7 +75,7 @@ class HomeScreen extends Component {
6775
bgColor="#188eee"
6876
/>
6977
<Button onClick={this.openWebView} title={'测试WebView'} bgColor="#8E44AD" />
70-
<Button onClick={this.props.showDialog} title={'ShowDialog'} bgColor="#5ACBC8" />
78+
<Button onClick={this.showDialog} title={'ShowDialog'} bgColor="#5ACBC8" />
7179
<Button
7280
onClick={this.onNavigateRouthPush.bind(this, 'ES6Screen')}
7381
title={'ES6Screen'}
@@ -93,10 +101,16 @@ const styles = StyleSheet.create({
93101
paddingHorizontal: 10
94102
}
95103
});
96-
const mapStateToProps = () => ({});
104+
const mapStateToProps = state => {
105+
return {
106+
theme: state.theme
107+
};
108+
};
97109
const mapDispatchToProps = (dispatch, ownProps) => {
98110
return {
99-
showDialog: () => dispatch(dialogType.HOME_DIALOG)
111+
showDialog: option => dispatch(option),
112+
hideDialog: () => dispatch(dialogType.HIDE_DIALOG),
113+
setTheme: () => dispatch({ type: 'DARK_THEME' })
100114
};
101115
};
102116
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);

‎src/redux/actions/dialogType.js‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,36 @@
11
import React from 'react';
22
import ViewTest from '../../page/DialogModules/ViewTest';
3+
import LoginDialog from '../../page/DialogModules/Login';
34
import { DialogTitle } from 'react-native-popup-dialog';
45

5-
export const SHOW_DIALOG = 'SHOW_DIALOG';
6-
export const HIDE_DIALOG = {
7-
type: 'HIDE_DIALOG'
8-
};
6+
export const SHOW_DIALOG = { type: 'SHOW_DIALOG' };
7+
export const HIDE_DIALOG = { type: 'HIDE_DIALOG' };
98

109
export const LOGIN_DIALOG = {
11-
type: SHOW_DIALOG,
10+
...SHOW_DIALOG,
11+
width: 100,
12+
height: 100,
13+
children: <LoginDialog />,
14+
dialogTitle: null,
15+
overlayOpacity: 0,
16+
dialogStyle: { backgroundColor: 'rgba(0, 0, 0, .7)' }
17+
};
18+
19+
export const LOGINMN_DIALOG = {
20+
...SHOW_DIALOG,
21+
width: 0.9,
22+
height: 300,
1223
children: <ViewTest routh="LOGIN" />,
13-
dialogTitle: <DialogTitle title="LOGIN" />
24+
dialogTitle: <DialogTitle title="LOGIN" />,
25+
confirmBtn: { title: '设置字体颜色', bgColor: '#188eee' },
26+
cancelBtn: { title: '关闭按钮', bgColor: '#9DABC0' }
1427
};
1528

1629
export const HOME_DIALOG = {
17-
type: SHOW_DIALOG,
18-
children: <ViewTest routh="HOME" />
30+
...SHOW_DIALOG,
31+
width: 0.9,
32+
height: 300,
33+
children: <ViewTest routh="HOME" />,
34+
confirmBtn: { title: '设置字体颜色', bgColor: '#188eee' },
35+
cancelBtn: { title: '关闭按钮', bgColor: '#9DABC0' }
1936
};

0 commit comments

Comments
 (0)