Skip to content

Commit 22088c3

Browse files
sunnylqmsunnylqm
committed
fix
1 parent 0f07fef commit 22088c3

34 files changed

+2794
-35
lines changed

‎cndocs/_canary-channel-api-warning.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
:::tip Canary 🧪
2+
3+
**This API is currently only available in React Native’s Canary and Experimental channels.**
4+
5+
If you want to try it out, please [enable the Canary Channel](releases/release-levels) in your app.
6+
7+
:::

‎cndocs/_experimental-api-warning.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:::important Experimental 🧪
2+
3+
**This API is experimental.** Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production.
4+
5+
:::

‎cndocs/_experimental-channel-api-warning.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
:::tip Experimental Feature 🧪
2+
3+
**This API is currently only available in React Native’s Experimental channels.**
4+
5+
Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production.
6+
7+
If you want to try it out, please [enable the Experimental Channel](releases/release-levels) in your app.
8+
9+
:::

‎cnwebsite/docusaurus.config.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -256,12 +256,6 @@ const config: Config = {
256256
},
257257
],
258258
},
259-
{
260-
label: '实战课',
261-
href: '//time.geekbang.org/column/intro/100110101?code=FAqHFVRUur%2FgAP-yJQWitk9ieF80imRky3PVsIs%2FX6A%3D',
262-
position: 'right',
263-
className: 'hot-link',
264-
},
265259
{
266260
label: '讨论',
267261
href: '//github.com/reactnativecn/react-native-website/issues',

‎cnwebsite/src/components/Home/CallToAction/index.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React from 'react';
9+
10+
import Logo from '../Logo';
11+
12+
import styles from './styles.module.css';
13+
14+
function CallToAction() {
15+
return (
16+
<div className={styles.wrapper}>
17+
<div className={styles.background} />
18+
<div className={styles.container}>
19+
<Logo />
20+
<h1 className={styles.title}>Welcome to the React Native community</h1>
21+
<a href="/docs/environment-setup" className={styles.primaryButton}>
22+
Get Started
23+
</a>
24+
</div>
25+
</div>
26+
);
27+
}
28+
29+
export default CallToAction;

‎cnwebsite/src/components/Home/CallToAction/styles.module.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
.wrapper {
9+
text-align: center;
10+
overflow: hidden;
11+
position: relative;
12+
}
13+
14+
.background {
15+
position: absolute;
16+
width: 100%;
17+
height: 100%;
18+
background-image: url("/img/homepage/cta-bg-pattern.png");
19+
background-size: cover;
20+
background-position: center center;
21+
opacity: 0.1;
22+
}
23+
24+
.container {
25+
position: relative;
26+
display: flex;
27+
flex-direction: column;
28+
justify-content: center;
29+
align-items: center;
30+
gap: 1rem;
31+
padding: 2rem;
32+
margin: 8rem auto;
33+
max-width: 600px;
34+
}
35+
36+
.title {
37+
font-size: 40px;
38+
line-height: 140%;
39+
}
40+
41+
.primaryButton {
42+
background-color: var(--home-button-primary);
43+
color: var(--home-button-primary-text);
44+
border: none;
45+
padding: 10px 24px;
46+
border-radius: 99rem;
47+
font-weight: bold;
48+
font-size: 17px;
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
gap: 0.35rem;
53+
}
54+
55+
.primaryButton:hover {
56+
background-color: var(--home-button-primary-hover);
57+
color: var(--home-button-primary-text);
58+
}
59+
60+
@media (max-width: 600px) {
61+
.background {
62+
display: none;
63+
}
64+
}

‎cnwebsite/src/components/Home/Community/index.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React from 'react';
9+
10+
import useBaseUrl from '@docusaurus/useBaseUrl';
11+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
12+
13+
import Section from '../Section';
14+
import SectionTitle from '../SectionTitle';
15+
16+
import styles from './styles.module.css';
17+
18+
function Community() {
19+
const {siteConfig} = useDocusaurusContext();
20+
const apps = Object.values(siteConfig.customFields.users)
21+
.flat()
22+
.filter(app => app.pinned);
23+
24+
return (
25+
<Section>
26+
<SectionTitle title="Meta supported. Community driven." />
27+
<div className={styles.featureContainer}>
28+
<div>
29+
<p>
30+
Meta released React Native in 2015 and has been maintaining it ever
31+
since.
32+
</p>
33+
<p>
34+
In 2018, React Native had the{' '}
35+
<a href="https://octoverse.github.com/2018/projects#repositories">
36+
2nd highest
37+
</a>{' '}
38+
number of contributors for any repository in GitHub. Today, React
39+
Native is supported by contributions from individuals and companies
40+
around the world including{' '}
41+
<span>
42+
<a href="https://callstack.com/">Callstack</a>
43+
</span>
44+
,{' '}
45+
<span>
46+
<a href="https://expo.io/">Expo</a>
47+
</span>
48+
, <a href="https://infinite.red/">Infinite Red</a>,{' '}
49+
<a href="https://www.microsoft.com/">Microsoft</a> and{' '}
50+
<a href="https://swmansion.com/">Software Mansion</a>.
51+
</p>
52+
<p>
53+
Our community is always shipping exciting new projects and exploring
54+
platforms beyond Android and iOS with repos like{' '}
55+
<span>
56+
<a href="https://github.com/microsoft/react-native-windows#readme">
57+
React Native Windows
58+
</a>
59+
</span>
60+
,{' '}
61+
<a href="https://github.com/microsoft/react-native-macos#readme">
62+
React Native macOS
63+
</a>{' '}
64+
and{' '}
65+
<a href="https://github.com/necolas/react-native-web#readme">
66+
React Native Web
67+
</a>
68+
.
69+
</p>
70+
</div>
71+
<div>
72+
<p>
73+
React Native is being used in thousands of apps, but it's likely
74+
you've already used it in one of these apps:
75+
</p>
76+
<ul className="AppList">
77+
{apps.map((app, i) => {
78+
const imgSource = !app.icon.startsWith('http')
79+
? useBaseUrl('img/showcase/' + app.icon)
80+
: app.icon;
81+
return (
82+
<li key={i} className="item">
83+
{app.infoLink ? (
84+
<a href={app.infoLink}>
85+
<img src={imgSource} alt={app.name} />
86+
</a>
87+
) : (
88+
<img src={imgSource} alt={app.name} />
89+
)}
90+
</li>
91+
);
92+
})}
93+
</ul>
94+
<p>
95+
and <a href={useBaseUrl(`showcase`)}>many more</a>.
96+
</p>
97+
</div>
98+
</div>
99+
</Section>
100+
);
101+
}
102+
103+
export default Community;

‎cnwebsite/src/components/Home/Community/styles.module.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
.featureContainer {
9+
display: flex;
10+
justify-content: space-between;
11+
gap: 2rem;
12+
margin: 1rem auto;
13+
}
14+
15+
.featureContainer > :first-child {
16+
border-right: 1px solid var(--home-border);
17+
padding-right: 2rem;
18+
}
19+
20+
@media only screen and (max-width: 900px) {
21+
.featureContainer {
22+
flex-direction: column;
23+
gap: 0rem;
24+
max-width: 600px;
25+
}
26+
27+
.featureContainer > :first-child {
28+
border-right: none;
29+
padding-right: 0;
30+
}
31+
}

‎cnwebsite/src/components/Home/Framework/index.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React from 'react';
9+
10+
import useBaseUrl from '@docusaurus/useBaseUrl';
11+
import ThemedImage from '@theme/ThemedImage';
12+
13+
import Section from '../Section';
14+
import SectionTitle from '../SectionTitle';
15+
16+
import styles from './styles.module.css';
17+
18+
function Framework() {
19+
return (
20+
<Section>
21+
<SectionTitle
22+
title="Get a head start with a framework"
23+
description={
24+
<>
25+
React Native brings the React programming paradigm to platforms like
26+
Android and iOS. It doesn’t prescribe how to do routing, or how to
27+
access each of the numerous platform APIs. To build a new app with
28+
React Native, we recommend a framework like{' '}
29+
<a href="https://expo.dev">Expo</a>.
30+
</>
31+
}
32+
/>
33+
<div className={styles.cardContainer}>
34+
<div className={styles.card}>
35+
<ThemedImage
36+
sources={{
37+
light: '/img/homepage/file-based-routing.png',
38+
dark: '/img/homepage/file-based-routing-dark.png',
39+
}}
40+
className={styles.cardImage}
41+
alt="File system with folders and files representing screens and navigation"
42+
/>
43+
<div className={styles.cardContent}>
44+
<h4 className={styles.cardTitle}>File-based routing</h4>
45+
<p className={styles.cardDescription}>
46+
Create stack, modal, drawer, and tab screens with minimal
47+
boilerplate using your filesystem.
48+
</p>
49+
</div>
50+
</div>
51+
<div className={styles.card}>
52+
<ThemedImage
53+
sources={{
54+
light: useBaseUrl('/img/homepage/libraries.png'),
55+
dark: useBaseUrl('/img/homepage/libraries-dark.png'),
56+
}}
57+
alt="Grid of icons representing libraries, SDKs, and native code"
58+
className={styles.cardImage}
59+
/>
60+
<div className={styles.cardContent}>
61+
<h4 className={styles.cardTitle}>
62+
Use any library, SDK, or native code
63+
</h4>
64+
<p className={styles.cardDescription}>
65+
Generate native changes or write your own native code. Use over 50
66+
modules to create your app.
67+
</p>
68+
</div>
69+
</div>
70+
<div className={styles.card}>
71+
<ThemedImage
72+
sources={{
73+
light: useBaseUrl('/img/homepage/tools.png'),
74+
dark: useBaseUrl('/img/homepage/tools-dark.png'),
75+
}}
76+
className={styles.cardImage}
77+
alt="List of developer tool toggles for debugging, performance, and more"
78+
/>
79+
<div className={styles.cardContent}>
80+
<h4 className={styles.cardTitle}>Developer tools</h4>
81+
<p className={styles.cardDescription}>
82+
Get started quickly with Expo Go, then continue with
83+
expo-dev-client: a module that adds Expo’s tools to apps that
84+
require native changes.
85+
</p>
86+
</div>
87+
</div>
88+
</div>
89+
</Section>
90+
);
91+
}
92+
93+
export default Framework;

0 commit comments

Comments
 (0)