Skip to content

Commit ebda0f1

Browse files
committed
chore: test styled-component, works fine
1 parent 6db8bcf commit ebda0f1

File tree

3 files changed

+106
-8
lines changed

3 files changed

+106
-8
lines changed

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"expo-font": "~5.0.1",
1919
"react": "16.8.3",
2020
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
21-
"react-navigation": "^3.11.0"
21+
"react-navigation": "^3.11.0",
22+
"styled-components": "^4.3.1"
2223
},
2324
"devDependencies": {
2425
"babel-preset-expo": "^5.0.0",

screens/HomeScreen.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React from 'react'
2+
import styled from 'styled-components/native'
3+
24
import {
35
Image,
46
Platform,
@@ -19,7 +21,7 @@ export default class HomeScreen extends React.Component {
1921

2022
render() {
2123
return (
22-
<View style={styles.container}>
24+
<Wrapper>
2325
<ScrollView
2426
style={styles.container}
2527
contentContainerStyle={styles.contentContainer}
@@ -38,7 +40,7 @@ export default class HomeScreen extends React.Component {
3840
<View style={styles.getStartedContainer}>
3941
{this._maybeRenderDevelopmentModeWarning()}
4042

41-
<Text style={styles.getStartedText}>CPS 客户端</Text>
43+
<StyledText>CPS 客户端</StyledText>
4244

4345
<View
4446
style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
@@ -74,7 +76,7 @@ export default class HomeScreen extends React.Component {
7476
</MonoText>
7577
</View>
7678
</View>
77-
</View>
79+
</Wrapper>
7880
)
7981
}
8082

@@ -114,6 +116,15 @@ export default class HomeScreen extends React.Component {
114116
}
115117
}
116118

119+
const Wrapper = styled.View`
120+
flex: 1;
121+
background-color: #fff;
122+
`
123+
const StyledText = styled.Text`
124+
color: tomato;
125+
font-weight: bold;
126+
`
127+
117128
const styles = StyleSheet.create({
118129
container: {
119130
flex: 1,

yarn.lock

Lines changed: 90 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -761,6 +761,20 @@
761761
exec-sh "^0.3.2"
762762
minimist "^1.2.0"
763763

764+
"@emotion/is-prop-valid@^0.7.3":
765+
version "0.7.3"
766+
resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
767+
dependencies:
768+
"@emotion/memoize" "0.7.1"
769+
770+
"@emotion/[email protected]":
771+
version "0.7.1"
772+
resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
773+
774+
"@emotion/unitless@^0.7.0":
775+
version "0.7.3"
776+
resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f"
777+
764778
765779
version "2.1.1"
766780
resolved "https://registry.npmjs.org/@expo/samples/-/samples-2.1.1.tgz#563ccd71f6c7fd9eb9389f4aa91d37c65040dbff"
@@ -1366,6 +1380,19 @@ babel-plugin-react-native-web@^0.9.6:
13661380
version "0.9.13"
13671381
resolved "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.9.13.tgz#20d76e8e78815582b3d983efa19b3116168e7784"
13681382

1383+
"babel-plugin-styled-components@>= 1":
1384+
version "1.10.0"
1385+
resolved "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
1386+
dependencies:
1387+
"@babel/helper-annotate-as-pure" "^7.0.0"
1388+
"@babel/helper-module-imports" "^7.0.0"
1389+
babel-plugin-syntax-jsx "^6.18.0"
1390+
lodash "^4.17.10"
1391+
1392+
babel-plugin-syntax-jsx@^6.18.0:
1393+
version "6.18.0"
1394+
resolved "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
1395+
13691396
babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
13701397
version "7.0.0-beta.0"
13711398
resolved "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
@@ -1602,6 +1629,10 @@ camelcase@^5.0.0:
16021629
version "5.3.1"
16031630
resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
16041631

1632+
camelize@^1.0.0:
1633+
version "1.0.0"
1634+
resolved "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
1635+
16051636
can-use-dom@^0.1.0:
16061637
version "0.1.0"
16071638
resolved "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
@@ -1868,6 +1899,18 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
18681899
shebang-command "^1.2.0"
18691900
which "^1.2.9"
18701901

1902+
css-color-keywords@^1.0.0:
1903+
version "1.0.0"
1904+
resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
1905+
1906+
css-to-react-native@^2.2.2:
1907+
version "2.3.1"
1908+
resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.1.tgz#cf0f61e0514846e2d4dc188b0886e29d8bef64a2"
1909+
dependencies:
1910+
camelize "^1.0.0"
1911+
css-color-keywords "^1.0.0"
1912+
postcss-value-parser "^3.3.0"
1913+
18711914
[email protected], "cssom@>= 0.3.2 < 0.4.0":
18721915
version "0.3.6"
18731916
resolved "https://registry.npmjs.org/cssom/-/cssom-0.3.6.tgz#f85206cee04efa841f3c5982a74ba96ab20d65ad"
@@ -3249,6 +3292,10 @@ is-typedarray@~1.0.0:
32493292
version "1.0.0"
32503293
resolved "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
32513294

3295+
is-what@^3.2.3:
3296+
version "3.2.3"
3297+
resolved "https://registry.npmjs.org/is-what/-/is-what-3.2.3.tgz#50f76f1bd8e56967e15765d1d34302513701997b"
3298+
32523299
is-windows@^1.0.2:
32533300
version "1.0.2"
32543301
resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -3915,7 +3962,7 @@ lodash.throttle@^4.1.1:
39153962
version "4.1.1"
39163963
resolved "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
39173964

3918-
lodash@^4.0.0, lodash@^4.16.2, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0, lodash@^4.6.1:
3965+
lodash@^4.0.0, lodash@^4.16.2, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0, lodash@^4.6.1:
39193966
version "4.17.11"
39203967
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
39213968

@@ -4006,6 +4053,16 @@ mem@^4.0.0:
40064053
mimic-fn "^2.0.0"
40074054
p-is-promise "^2.0.0"
40084055

4056+
memoize-one@^5.0.0:
4057+
version "5.0.4"
4058+
resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz#005928aced5c43d890a4dfab18ca908b0ec92cbc"
4059+
4060+
merge-anything@^2.2.4:
4061+
version "2.2.5"
4062+
resolved "https://registry.npmjs.org/merge-anything/-/merge-anything-2.2.5.tgz#37ef13f36359ee64f09c657d2cef45f7e29493f9"
4063+
dependencies:
4064+
is-what "^3.2.3"
4065+
40094066
merge-stream@^1.0.1:
40104067
version "1.0.1"
40114068
resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
@@ -4930,6 +4987,10 @@ posix-character-classes@^0.1.0:
49304987
version "0.1.1"
49314988
resolved "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
49324989

4990+
postcss-value-parser@^3.3.0:
4991+
version "3.3.1"
4992+
resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
4993+
49334994
pouchdb-collections@^1.0.1:
49344995
version "1.0.1"
49354996
resolved "https://registry.npmjs.org/pouchdb-collections/-/pouchdb-collections-1.0.1.tgz#fe63a17da977611abef7cb8026cb1a9553fd8359"
@@ -4990,7 +5051,7 @@ prompts@^2.0.1:
49905051
kleur "^3.0.2"
49915052
sisteransi "^1.0.0"
49925053

4993-
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
5054+
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
49945055
version "15.7.2"
49955056
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
49965057
dependencies:
@@ -5101,7 +5162,7 @@ react-google-maps@^9.4.5:
51015162
scriptjs "^2.5.8"
51025163
warning "^3.0.0"
51035164

5104-
react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
5165+
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
51055166
version "16.8.6"
51065167
resolved "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
51075168

@@ -5941,11 +6002,36 @@ strip-json-comments@~2.0.1:
59416002
version "2.0.1"
59426003
resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
59436004

6005+
styled-components@^4.3.1:
6006+
version "4.3.1"
6007+
resolved "https://registry.npmjs.org/styled-components/-/styled-components-4.3.1.tgz#18c3709f4ed9d582cd206b1acd8b758a211dd114"
6008+
dependencies:
6009+
"@babel/helper-module-imports" "^7.0.0"
6010+
"@emotion/is-prop-valid" "^0.7.3"
6011+
"@emotion/unitless" "^0.7.0"
6012+
babel-plugin-styled-components ">= 1"
6013+
css-to-react-native "^2.2.2"
6014+
memoize-one "^5.0.0"
6015+
merge-anything "^2.2.4"
6016+
prop-types "^15.5.4"
6017+
react-is "^16.6.0"
6018+
stylis "^3.5.0"
6019+
stylis-rule-sheet "^0.0.10"
6020+
supports-color "^5.5.0"
6021+
6022+
stylis-rule-sheet@^0.0.10:
6023+
version "0.0.10"
6024+
resolved "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
6025+
6026+
stylis@^3.5.0:
6027+
version "3.5.4"
6028+
resolved "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
6029+
59446030
supports-color@^2.0.0:
59456031
version "2.0.0"
59466032
resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
59476033

5948-
supports-color@^5.3.0:
6034+
supports-color@^5.3.0, supports-color@^5.5.0:
59496035
version "5.5.0"
59506036
resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
59516037
dependencies:

0 commit comments

Comments
 (0)