Skip to content

Commit 366504a

Browse files
author
xujie3949
committed
添加react-native-router-fluex例子
1 parent 20ca505 commit 366504a

File tree

7 files changed

+194
-116
lines changed

7 files changed

+194
-116
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ coverage
99
# Compiled binary addons (http://nodejs.org/api/addons.html)
1010
build
1111

12+
# Compiled android binary directory
13+
android/.gradle
14+
1215
# Dependency directory
1316
node_modules
1417

‎androidSrc/PageOne.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* Created by xujie3949 on 2016/7/21.
3+
*/
4+
5+
import React, { Component } from 'react';
6+
import { View, Text } from 'react-native';
7+
import { Actions } from 'react-native-router-flux';
8+
9+
class PageOne extends Component {
10+
render() {
11+
const goToPageTwo = () => Actions.pageTwo({text: 'Hello World!'});
12+
return (
13+
<View style={{margin: 128}}>
14+
<Text onPress={goToPageTwo}>This is PageOne!</Text>
15+
</View>
16+
)
17+
}
18+
}
19+
20+
export default PageOne;

‎androidSrc/PageTwo.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* Created by xujie3949 on 2016/7/21.
3+
*/
4+
5+
import React, { Component } from 'react';
6+
import { View, Text } from 'react-native';
7+
import { Actions } from 'react-native-router-flux';
8+
9+
class PageTwo extends Component {
10+
render() {
11+
return (
12+
<View style={{margin: 128}}>
13+
<Text>This is PageTwo!</Text>
14+
<Text>{this.props.text}</Text>
15+
</View>
16+
)
17+
}
18+
}
19+
20+
export default PageTwo;

‎androidSrc/index.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* Created by xujie3949 on 2016/7/21.
3+
*/
4+
5+
import React, { Component } from 'react';
6+
import { Router, Scene } from 'react-native-router-flux';
7+
8+
import PageOne from './PageOne';
9+
import PageTwo from './PageTwo';
10+
11+
class App extends Component {
12+
render() {
13+
return (
14+
<Router>
15+
<Scene key="root">
16+
<Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
17+
<Scene key="pageTwo" component={PageTwo} title="PageTwo" />
18+
</Scene>
19+
</Router>
20+
)
21+
}
22+
}
23+
24+
export default App;

‎index.android.js‎

Lines changed: 3 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -4,119 +4,7 @@
44
* @flow
55
*/
66

7-
import React, { Component } from 'react';
8-
var ProgressBar = require('ProgressBarAndroid');
9-
import {
10-
AppRegistry,
11-
StyleSheet,
12-
Text,
13-
Modal,
14-
Image,
15-
TextInput,
16-
ProgressBarAndroid,
17-
View
18-
} from 'react-native';
7+
import { AppRegistry } from 'react-native';
8+
import AndroidApp from './androidSrc/index.js';
199

20-
class AndroidProject extends Component {
21-
constructor(props) {
22-
super(props);
23-
this.state = {username: "", password: "",modalVisible:false,transparent:true};
24-
this.handleSubmit = this.handleSubmit.bind(this);
25-
}
26-
27-
handleSubmit(){
28-
this.setState({modalVisible:!this.state.modalVisible})
29-
}
30-
31-
render() {
32-
const modalBackgroundStyle = {
33-
backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
34-
}
35-
const innerContainerTransparentStyle = this.state.transparent
36-
? {backgroundColor: '#e5e5e5', padding: 20,width:150}
37-
: null
38-
return (
39-
<View style={{paddingLeft:10,paddingRight:10,backgroundColor:'#E8E8E8'}}>
40-
<View>
41-
<Image source={require('./Image/qq.png')} style={styles.style_image}/>
42-
</View>
43-
<View style={styles.style_user_input}>
44-
<TextInput placeholder='用户名' underlineColorAndroid='transparent' placeholderTextColor='gray' style={{height: 40, borderColor: 'gray', borderWidth: 1,textAlign:'center'}}>
45-
</TextInput>
46-
</View>
47-
<View style={styles.style_pwd_input}>
48-
<TextInput placeholder='密 码' underlineColorAndroid='transparent' secureTextEntry={true} placeholderTextColor='gray' style={{height: 40, borderColor: 'gray', borderWidth: 1,textAlign:'center'}}>
49-
</TextInput>
50-
</View>
51-
<View style={styles.style_login_container} >
52-
<Text onPress={this.handleSubmit} style={styles.style_login_text}>登 录</Text>
53-
</View>
54-
55-
56-
<Modal
57-
animationType='none'
58-
transparent={this.state.transparent}
59-
visible={this.state.modalVisible}
60-
onRequestClose={this.handleSubmit}
61-
>
62-
<View style={[styles.container, modalBackgroundStyle]}>
63-
<View style={[styles.innerContainer, innerContainerTransparentStyle]}>
64-
<View>
65-
<ProgressBar />
66-
</View>
67-
<Text onPress={this.handleSubmit} style={{marginTop:10}}>
68-
关闭
69-
</Text>
70-
</View>
71-
</View>
72-
</Modal>
73-
</View>
74-
);
75-
}
76-
}
77-
78-
const styles = StyleSheet.create({
79-
container: {
80-
flex: 1,
81-
justifyContent: 'center',
82-
alignItems: 'center',
83-
backgroundColor: '#999',
84-
},
85-
innerContainer: {
86-
borderRadius: 10,
87-
alignItems: 'center',
88-
},
89-
style_user_input:{
90-
backgroundColor:'#fff',
91-
marginTop:20,
92-
height:35,
93-
borderRadius:5,
94-
},
95-
style_pwd_input:{
96-
backgroundColor:'#fff',
97-
height:35,
98-
marginTop:10,
99-
borderRadius:5,
100-
},
101-
style_image:{
102-
borderRadius:35,
103-
height:70,
104-
width:70,
105-
marginTop:40,
106-
alignSelf:'center',
107-
},
108-
style_login_container:{
109-
backgroundColor:'green',
110-
borderRadius:5,
111-
height:35,
112-
marginTop:10
113-
},
114-
style_login_text:{
115-
textAlign:'center',
116-
color:"#FFF",
117-
height:35,
118-
textAlignVertical:'center'
119-
}
120-
});
121-
122-
AppRegistry.registerComponent('AndroidProject', () => AndroidProject);
10+
AppRegistry.registerComponent('AndroidProject', () => AndroidApp);

‎index.android_old.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
* @flow
5+
*/
6+
7+
import React, { Component } from 'react';
8+
var ProgressBar = require('ProgressBarAndroid');
9+
import {
10+
AppRegistry,
11+
StyleSheet,
12+
Text,
13+
Modal,
14+
Image,
15+
TextInput,
16+
ProgressBarAndroid,
17+
View
18+
} from 'react-native';
19+
20+
class AndroidProject extends Component {
21+
constructor(props) {
22+
super(props);
23+
this.state = {username: "", password: "",modalVisible:false,transparent:true};
24+
this.handleSubmit = this.handleSubmit.bind(this);
25+
}
26+
27+
handleSubmit(){
28+
this.setState({modalVisible:!this.state.modalVisible})
29+
}
30+
31+
render() {
32+
const modalBackgroundStyle = {
33+
backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
34+
}
35+
const innerContainerTransparentStyle = this.state.transparent
36+
? {backgroundColor: '#e5e5e5', padding: 20,width:150}
37+
: null
38+
return (
39+
<View style={{paddingLeft:10,paddingRight:10,backgroundColor:'#E8E8E8'}}>
40+
<View>
41+
<Image source={require('./Image/qq.png')} style={styles.style_image}/>
42+
</View>
43+
<View style={styles.style_user_input}>
44+
<TextInput placeholder='用户名' underlineColorAndroid='transparent' placeholderTextColor='gray' style={{height: 40, borderColor: 'gray', borderWidth: 1,textAlign:'center'}}>
45+
</TextInput>
46+
</View>
47+
<View style={styles.style_pwd_input}>
48+
<TextInput placeholder='密 码' underlineColorAndroid='transparent' secureTextEntry={true} placeholderTextColor='gray' style={{height: 40, borderColor: 'gray', borderWidth: 1,textAlign:'center'}}>
49+
</TextInput>
50+
</View>
51+
<View style={styles.style_login_container} >
52+
<Text onPress={this.handleSubmit} style={styles.style_login_text}>登 录</Text>
53+
</View>
54+
55+
56+
<Modal
57+
animationType='none'
58+
transparent={this.state.transparent}
59+
visible={this.state.modalVisible}
60+
onRequestClose={this.handleSubmit}
61+
>
62+
<View style={[styles.container, modalBackgroundStyle]}>
63+
<View style={[styles.innerContainer, innerContainerTransparentStyle]}>
64+
<View>
65+
<ProgressBar />
66+
</View>
67+
<Text onPress={this.handleSubmit} style={{marginTop:10}}>
68+
关闭
69+
</Text>
70+
</View>
71+
</View>
72+
</Modal>
73+
</View>
74+
);
75+
}
76+
}
77+
78+
const styles = StyleSheet.create({
79+
container: {
80+
flex: 1,
81+
justifyContent: 'center',
82+
alignItems: 'center',
83+
backgroundColor: '#999',
84+
},
85+
innerContainer: {
86+
borderRadius: 10,
87+
alignItems: 'center',
88+
},
89+
style_user_input:{
90+
backgroundColor:'#fff',
91+
marginTop:20,
92+
height:35,
93+
borderRadius:5,
94+
},
95+
style_pwd_input:{
96+
backgroundColor:'#fff',
97+
height:35,
98+
marginTop:10,
99+
borderRadius:5,
100+
},
101+
style_image:{
102+
borderRadius:35,
103+
height:70,
104+
width:70,
105+
marginTop:40,
106+
alignSelf:'center',
107+
},
108+
style_login_container:{
109+
backgroundColor:'green',
110+
borderRadius:5,
111+
height:35,
112+
marginTop:10
113+
},
114+
style_login_text:{
115+
textAlign:'center',
116+
color:"#FFF",
117+
height:35,
118+
textAlignVertical:'center'
119+
}
120+
});
121+
122+
AppRegistry.registerComponent('AndroidProject', () => AndroidProject);

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
},
88
"dependencies": {
99
"react": "15.2.1",
10-
"react-native": "0.29.2"
10+
"react-native": "0.29.2",
11+
"react-native-router-flux": "^3.31.2"
1112
}
1213
}

0 commit comments

Comments
 (0)