Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitebda0f1

Browse files
committed
chore: test styled-component, works fine
1 parent6db8bcf commitebda0f1

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
importReactfrom'react'
2+
importstyledfrom'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-
<Viewstyle={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
<Viewstyle={styles.getStartedContainer}>
3941
{this._maybeRenderDevelopmentModeWarning()}
4042

41-
<Textstyle={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+
constWrapper=styled.View`
120+
flex: 1;
121+
background-color: #fff;
122+
`
123+
constStyledText=styled.Text`
124+
color: tomato;
125+
font-weight: bold;
126+
`
127+
117128
conststyles=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/memoize@0.7.1":
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
"@expo/samples@2.1.1":
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
cssom@0.3.x, "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)
[8]ページ先頭
©2009-2025 Movatter.jp