Skip to content

Commit 9477b4a

Browse files
CodeRabbitYuCodeRabbitYu
committed
Commit
1 parent 56a02a1 commit 9477b4a

File tree

6 files changed

+411
-3
lines changed

6 files changed

+411
-3
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,7 @@
55
![登录效果](https://github.com/SurpassRabbit/react-native-template/blob/master/screenshots/Login.gif)
66

77

8+
### 2017.11.7更新说明
9+
1、使用`teaset`的`SegmentedView`组件实现左右滑动的效果。
10+
2、使用`teaset`的`Theme`控制页面中的颜色。
11+
3、使用`Mobx`控制登录中的状态，简单使用。

‎app/Common/SetTheme.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ import { Theme } from 'teaset';
22

33
Theme.set({
44

5-
backgroundColor:'white'
5+
backgroundColor:'white',
6+
transparentColor : 'transparent',
67
});

‎app/Pages/Login/Component/LoginInput.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* Created by Rabbit on 2017/11/3.
3+
*/
4+
5+
import React, {Component} from 'react';
6+
import {
7+
StyleSheet,
8+
Text,
9+
View,
10+
Image,
11+
TouchableOpacity
12+
} from 'react-native';
13+
14+
import { Input } from 'teaset';
15+
16+
const LoginInput = (props) => {
17+
18+
19+
return(
20+
<View style={iStyle.inputViewStyle}>
21+
<Input placeholder={props.placeholder}
22+
style={iStyle.inputStyle}
23+
secureTextEntry={false}
24+
onChangeText={props.onChangeText}
25+
onFocus={props.onFocus}
26+
onBlur={props.onBlur}
27+
maxLength={props.maxLength}
28+
autoCapitalize='none'
29+
clearButtonMode={'always'}
30+
/>
31+
{
32+
props.isVerify ?
33+
<TouchableOpacity onPress={props.getVerifyCode}>
34+
<Text style={iStyle.inputTitleStyle}>获取验证码</Text>
35+
</TouchableOpacity>
36+
:null
37+
}
38+
39+
</View>
40+
)
41+
}
42+
43+
export default LoginInput;
44+
45+
const iStyle = StyleSheet.create({
46+
inputViewStyle:{
47+
height:px2dp(88),
48+
marginTop:px2dp(20),
49+
// alignItems:'center',
50+
marginLeft:px2dp(108),
51+
marginRight:px2dp(108),
52+
borderBottomColor:'#d1d1d1',
53+
borderBottomWidth:px2dp(1),
54+
flexDirection:'row',
55+
justifyContent:'space-between',
56+
alignItems:'center',
57+
},
58+
inputStyle:{
59+
borderColor:'transparent',
60+
borderRadius:0,
61+
height:px2dp(86),
62+
flex:1,
63+
backgroundColor:'transparent',
64+
},
65+
inputTitleStyle:{
66+
fontSize:FONT_SIZE(12),
67+
color:'#333'
68+
}
69+
});

‎app/Pages/Login/Login.js‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
/**
2+
* Created by Rabbit on 2017/11/2.
3+
*/
4+
5+
import React, {Component} from 'react';
6+
import {
7+
StyleSheet,
8+
Text,
9+
View,
10+
Image,
11+
12+
TouchableOpacity,
13+
} from 'react-native';
14+
15+
import { SegmentedView, Button, NavigationBar, Overlay, Input , } from 'teaset';
16+
import { observer } from 'mobx-react/native'
17+
import { observable, computed, action, runInAction } from 'mobx'
18+
19+
20+
import LoginInput from './Component/LoginInput';
21+
22+
23+
const LoginView = (props) => {
24+
return(
25+
<View style={styles.loginViewStyle}>
26+
<LoginInput placeholder='请输入手机号'
27+
onChangeText={props.onChangeTopText}
28+
/>
29+
{
30+
props.isPass ?
31+
<View>
32+
<LoginInput placeholder='请输入密码'
33+
onChangeText={props.onChangeBottomText}
34+
/>
35+
<View style={{
36+
backgroundColor:Theme.transparentColor,
37+
justifyContent:'flex-end',
38+
alignItems:'flex-end',
39+
40+
}}>
41+
<Text style={styles.forgetPassStyle}
42+
onPress={()=>Actions.LoginPublic({headerTitle:'重置密码'})}
43+
>
44+
忘记密码
45+
</Text>
46+
</View>
47+
</View>
48+
:
49+
<View >
50+
<LoginInput isVerify={true}
51+
placeholder='请输入验证码'
52+
getVerifyCode={props.getVerifyCode}
53+
onChangeText={props.onChangeBottomText}
54+
onFocus={props.verifyFocus}
55+
/>
56+
{
57+
props.isImage?
58+
<LoginInput isImage={props.isImage}
59+
placeholder='请先输入图片验证码'
60+
onChangeText={props.onChangeBottomText}
61+
getVerifyCode={props.getVerifyCode}
62+
refreshImage={props.refreshImage}
63+
imageUrl={props.imageUrl}
64+
onBlur={props.imageCodeBlur}
65+
/>
66+
:
67+
null
68+
}
69+
<View style={{height: px2dp(60)}}/>
70+
</View>
71+
}
72+
73+
<Button title={'登录'}
74+
style={styles.loginButtonStyle}
75+
titleStyle={{fontSize:FONT_SIZE(14), color:'#fff'}}
76+
onPress={props.onPress}
77+
/>
78+
<View style={{flex:1,alignItems:'center',marginTop:px2dp(44)}}>
79+
<Text style={styles.createAccountStyle}
80+
onPress={()=>Actions.LoginPublic({headerTitle:'创建账号'})}
81+
>
82+
创建账号
83+
</Text>
84+
</View>
85+
</View>
86+
)
87+
}
88+
89+
@observer
90+
export default class Login extends Component {
91+
constructor(props) {
92+
super(props);
93+
this.state = {};
94+
}
95+
96+
@observable mobileCode = '';
97+
@observable verifyCode = '';
98+
@observable passCode = '';
99+
@observable isImage = false;
100+
render() {
101+
console.log(this.imageUrl);
102+
return (
103+
<View style={styles.container}>
104+
<NavigationBar title='登录'
105+
style={{height:64,backgroundColor:'white'}}
106+
statusBarStyle='default'
107+
rightView={
108+
<TouchableOpacity onPress={()=>Actions.pop()}>
109+
<Text>关闭</Text>
110+
</TouchableOpacity>
111+
}
112+
/>
113+
<SegmentedView style={{height:SCREEN_HEIGHT - 64 ,marginTop:64, backgroundColor:'#F9F9F9'}}
114+
type='carousel'
115+
indicatorLineColor={'#000'}
116+
>
117+
<SegmentedView.Sheet title='短信登录'
118+
titleStyle={{color:'#666'}}
119+
activeTitleStyle={{color:'#333'}}
120+
>
121+
<LoginView onPress={()=>this.onLoginPress(1)}
122+
getVerifyCode={()=>{}}
123+
onChangeTopText={(text)=>{
124+
this.mobileCode = text;
125+
}}
126+
onChangeBottomText={(text)=>{
127+
this.verifyCode = text;
128+
}}
129+
/>
130+
</SegmentedView.Sheet>
131+
<SegmentedView.Sheet title='密码登录'
132+
titleStyle={{color:'#333'}}
133+
activeTitleStyle={{color:'#000'}}
134+
>
135+
<LoginView isPass={true}
136+
onPress={()=>this.onLoginPress(2)}
137+
onChangeTopText={(text)=>{
138+
// console.log(text)
139+
this.mobileCode = text;
140+
}}
141+
onChangeBottomText={(text)=>{
142+
// console.log(text);
143+
this.passCode = text;
144+
}}
145+
/>
146+
147+
</SegmentedView.Sheet>
148+
</SegmentedView>
149+
</View>
150+
);
151+
}
152+
153+
154+
onLoginPress = (code)=>{
155+
156+
}
157+
158+
}
159+
160+
const styles = StyleSheet.create({
161+
container: {
162+
flex: 1,
163+
backgroundColor:'#F9F9F9'
164+
},
165+
loginViewStyle:{
166+
// backgroundColor:'red',
167+
marginTop:px2dp(80)
168+
},
169+
loginButtonStyle:{
170+
marginLeft:px2dp(108),
171+
marginRight:px2dp(108),
172+
height:px2dp(80),
173+
marginTop:px2dp(142),
174+
backgroundColor:'#ff7000',
175+
borderColor:Theme.transparentColor,
176+
borderRadius:20
177+
178+
},
179+
createAccountStyle:{
180+
color:'#ff7000',
181+
fontSize:FONT_SIZE(13),
182+
183+
},
184+
forgetPassStyle:{
185+
marginTop:px2dp(28),
186+
height:px2dp(32),
187+
marginRight:px2dp(108),
188+
color:'#ff7000',
189+
fontSize:FONT_SIZE(12),
190+
}
191+
});

0 commit comments

Comments
 (0)