Skip to content

Commit 00a69d6

Browse files
zhangjunhdzhangjunhd
committed
react-native demo: Styles
1 parent 65ee2dc commit 00a69d6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+2180
-1
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
1. [demo:Touch][43]
3737
1. [demo:Bestsellers][44]
3838
1. [demo:PlatformSpecific][45]
39+
1. [demo:Styles][46]
3940

4041
## Web服务
4142
1. [Express][17]
@@ -74,4 +75,5 @@
7475
[42]: react-native-demo/WeatherProject
7576
[43]: react-native-demo/Touch
7677
[44]: react-native-demo/Bestsellers
77-
[45]: react-native-demo/PlatformSpecific
78+
[45]: react-native-demo/PlatformSpecific
79+
[46]: react-native-demo/Styles

‎react-native-demo/Styles/.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react-native"]
3+
}

‎react-native-demo/Styles/.buckconfig‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎react-native-demo/Styles/.flowconfig‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
[ignore]
2+
3+
# We fork some components by platform.
4+
.*/*[.]android.js
5+
6+
# Ignore templates with `@flow` in header
7+
.*/local-cli/generator.*
8+
9+
# Ignore malformed json
10+
.*/node_modules/y18n/test/.*\.json
11+
12+
# Ignore the website subdir
13+
<PROJECT_ROOT>/website/.*
14+
15+
# Ignore BUCK generated dirs
16+
<PROJECT_ROOT>/\.buckd/
17+
18+
# Ignore unexpected extra @providesModule
19+
.*/node_modules/commoner/test/source/widget/share.js
20+
21+
# Ignore duplicate module providers
22+
# For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root
23+
.*/Libraries/react-native/React.js
24+
.*/Libraries/react-native/ReactNative.js
25+
.*/node_modules/jest-runtime/build/__tests__/.*
26+
27+
[include]
28+
29+
[libs]
30+
node_modules/react-native/Libraries/react-native/react-native-interface.js
31+
node_modules/react-native/flow
32+
flow/
33+
34+
[options]
35+
module.system=haste
36+
37+
esproposal.class_static_fields=enable
38+
esproposal.class_instance_fields=enable
39+
40+
experimental.strict_type_args=true
41+
42+
munge_underscores=true
43+
44+
module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
45+
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
46+
47+
suppress_type=$FlowIssue
48+
suppress_type=$FlowFixMe
49+
suppress_type=$FixMe
50+
51+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
52+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
53+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
54+
55+
unsafe.enable_getters_and_setters=true
56+
57+
[version]
58+
^0.33.0

‎react-native-demo/Styles/.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IJ
26+
#
27+
*.iml
28+
.idea
29+
.gradle
30+
local.properties
31+
32+
# node.js
33+
#
34+
node_modules/
35+
npm-debug.log
36+
37+
# BUCK
38+
buck-out/
39+
\.buckd/
40+
android/app/libs
41+
android/keystores/debug.keystore

‎react-native-demo/Styles/.watchmanconfig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎react-native-demo/Styles/FlexDemo/index.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { Component } from 'react';
2+
import {
3+
StyleSheet,
4+
Text,
5+
View
6+
} from 'react-native';
7+
8+
import styles from './style';
9+
10+
class FlexDemo extends Component {
11+
render() {
12+
return (
13+
<View style={styles.parent}>
14+
<Text style={styles.child}> Child One </Text>
15+
<Text style={styles.child}> Child Two </Text>
16+
<Text style={styles.child}> Child Three </Text>
17+
</View>
18+
);
19+
}
20+
}
21+
22+
export default FlexDemo;

‎react-native-demo/Styles/FlexDemo/style.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import {
3+
StyleSheet,
4+
} from 'react-native';
5+
6+
const styles = StyleSheet.create({
7+
parent: {
8+
flex: 1,
9+
flexDirection: 'row',
10+
alignItems: 'flex-end',
11+
backgroundColor: '#F5FCFF',
12+
borderColor: '#0099AA',
13+
borderWidth: 5,
14+
marginTop: 30
15+
},
16+
child: {
17+
flex: 1,
18+
borderColor: '#AA0099',
19+
borderWidth: 2,
20+
textAlign: 'center',
21+
fontSize: 24,
22+
}
23+
});
24+
25+
export default styles;

‎react-native-demo/Styles/Mondrian/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { Component } from 'react';
2+
import {
3+
StyleSheet,
4+
Text,
5+
View
6+
} from 'react-native';
7+
8+
import styles from './style';
9+
10+
class Mondrian extends Component {
11+
render() {
12+
return (
13+
<View style={styles.parent}>
14+
<View style={styles.topBlock}>
15+
<View style={styles.leftCol}>
16+
<View style={[styles.cellOne, styles.base]} />
17+
<View style={[styles.base, styles.cellTwo]} />
18+
</View>
19+
<View style={[styles.cellThree, styles.base]} />
20+
</View>
21+
<View style={styles.bottomBlock}>
22+
<View style={[styles.cellFour, styles.base]}/>
23+
<View style={[styles.cellFive, styles.base]}/>
24+
<View style={styles.bottomRight}>
25+
<View style={[styles.cellSix, styles.base]} />
26+
<View style={[styles.cellSeven, styles.base]} />
27+
</View>
28+
</View>
29+
</View>
30+
);
31+
}
32+
}
33+
34+
export default Mondrian;

‎react-native-demo/Styles/Mondrian/style.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from 'react';
2+
import {
3+
StyleSheet,
4+
} from 'react-native';
5+
6+
const styles = StyleSheet.create({
7+
parent: {
8+
flexDirection: 'column',
9+
position: 'absolute',
10+
top: 30,
11+
left: 0,
12+
right: 0,
13+
bottom: 0
14+
},
15+
base: {
16+
borderColor: '#000000',
17+
borderWidth: 5
18+
},
19+
topBlock: {
20+
flexDirection: 'row',
21+
flex: 5
22+
},
23+
leftCol: {
24+
flex: 2
25+
},
26+
bottomBlock: {
27+
flex: 2,
28+
flexDirection: 'row'
29+
},
30+
bottomRight: {
31+
flexDirection: 'column',
32+
flex: 2
33+
},
34+
cellOne: {
35+
flex: 1,
36+
borderBottomWidth: 15
37+
},
38+
cellTwo: {
39+
flex: 3
40+
},
41+
cellThree: {
42+
backgroundColor: '#FF0000',
43+
flex: 5
44+
},
45+
cellFour: {
46+
flex: 3,
47+
backgroundColor: '#0000FF'
48+
},
49+
cellFive: {
50+
flex: 6
51+
},
52+
cellSix: {
53+
flex: 1
54+
},
55+
cellSeven: {
56+
flex: 1,
57+
backgroundColor: '#FFFF00'
58+
}
59+
});
60+
61+
export default styles;

0 commit comments

Comments
 (0)