Skip to content

Commit b908221

Browse files
sunnylqmsunnylqm
committed
0,80
1 parent 5e8de96 commit b908221

File tree

364 files changed

+53173
-466
lines changed

Some content is hidden

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

364 files changed

+53173
-466
lines changed

‎cndocs/get-started-without-a-framework.md‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
---
2+
id: getting-started-without-a-framework
3+
title: Get Started Without a Framework
4+
hide_table_of_contents: true
5+
---
6+
7+
import Tabs from '@theme/Tabs';
8+
import TabItem from '@theme/TabItem';
9+
import constants from '@site/core/TabsConstants';
10+
import PlatformSupport from '@site/src/theme/PlatformSupport';
11+
12+
import RemoveGlobalCLI from './\_remove-global-cli.md';
13+
14+
<PlatformSupport platforms={['android', 'ios', 'macOS', 'tv', 'watchOS', 'web', 'windows', 'visionOS']} />
15+
16+
If you have constraints that are not served well by a [Framework](/architecture/glossary#react-native-framework), or you prefer to write your own Framework, you can create a React Native app without using a Framework.
17+
18+
To do so, you'll first need to [set up your environment](set-up-your-environment). Once you're set up, continue with the steps below to create an application and start developing.
19+
20+
### Step 1: Creating a new application
21+
22+
<RemoveGlobalCLI />
23+
24+
You can use [React Native Community CLI](https://github.com/react-native-community/cli) to generate a new project. Let's create a new React Native project called "AwesomeProject":
25+
26+
```shell
27+
npx @react-native-community/cli@latest init AwesomeProject
28+
```
29+
30+
This is not necessary if you are integrating React Native into an existing application, or if you've installed [Expo](https://docs.expo.dev/bare/installing-expo-modules/) in your project, or if you're adding Android support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to set up your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).
31+
32+
:::info
33+
34+
If you are having trouble with iOS, try to reinstall the dependencies by running:
35+
36+
1. `cd ios` to navigate to the `ios` folder.
37+
2. `bundle install` to install [Bundler](https://bundler.io/)
38+
3. `bundle exec pod install` to install the iOS dependencies managed by CocoaPods.
39+
40+
:::
41+
42+
#### [Optional] Using a specific version or template
43+
44+
If you want to start a new project with a specific React Native version, you can use the `--version` argument:
45+
46+
```shell
47+
npx @react-native-community/[email protected] init AwesomeProject --version X.XX.X
48+
```
49+
50+
You can also start a project with a custom React Native template with the `--template` argument, read more [here](https://github.com/react-native-community/cli/blob/main/docs/init.md#initializing-project-with-custom-template).
51+
52+
### Step 2: Start Metro
53+
54+
[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder:
55+
56+
<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
57+
<TabItem value="npm">
58+
59+
```shell
60+
npm start
61+
```
62+
63+
</TabItem>
64+
<TabItem value="yarn">
65+
66+
```shell
67+
yarn start
68+
```
69+
70+
</TabItem>
71+
</Tabs>
72+
73+
:::note
74+
If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
75+
:::
76+
77+
### Step 3: Start your application
78+
79+
Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
80+
81+
<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
82+
<TabItem value="npm">
83+
84+
```shell
85+
npm run android
86+
```
87+
88+
</TabItem>
89+
<TabItem value="yarn">
90+
91+
```shell
92+
yarn android
93+
```
94+
95+
</TabItem>
96+
</Tabs>
97+
98+
If everything is set up correctly, you should see your new app running in your Android emulator shortly.
99+
100+
This is one way to run your app - you can also run it directly from within Android Studio.
101+
102+
> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page.
103+
104+
### Step 4: Modifying your app
105+
106+
Now that you have successfully run the app, let's modify it.
107+
108+
- Open `App.tsx` in your text editor of choice and edit some lines.
109+
- Press the <kbd>R</kbd> key twice or select `Reload` from the Dev Menu (<kbd>Ctrl</kbd> + <kbd>M</kbd>) to see your changes!
110+
111+
### That's it!
112+
113+
Congratulations! You've successfully run and modified your first barebone React Native app.
114+
115+
<center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
116+
117+
### Now what?
118+
119+
- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
120+
- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).

‎cndocs/layoutevent.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
id: layoutevent
3-
title: 布局事件对象
3+
title: LayoutEvent 对象类型
44
---
55

6-
`LayoutEvent` object is returned in the callback as a result of component layout change, for example `onLayout` in [View](view) component.
6+
`LayoutEvent` 对象作为组件布局变化的结果在回调中返回，例如 [View](view) 组件中的 `onLayout`。
77

88
## 示例
99

@@ -23,39 +23,39 @@ title: 布局事件对象
2323

2424
### `height`
2525

26-
Height of the component after the layout changes.
26+
布局变化后组件的高度。
2727

2828
| Type | Optional |
2929
| ------ | -------- |
3030
| number | No |
3131

3232
### `width`
3333

34-
Width of the component after the layout changes.
34+
布局变化后组件的宽度。
3535

3636
| Type | Optional |
3737
| ------ | -------- |
3838
| number | No |
3939

4040
### `x`
4141

42-
Component X coordinate inside the parent component.
42+
组件在父组件内的 X 坐标。
4343

4444
| Type | Optional |
4545
| ------ | -------- |
4646
| number | No |
4747

4848
### `y`
4949

50-
Component Y coordinate inside the parent component.
50+
组件在父组件内的 Y 坐标。
5151

5252
| Type | Optional |
5353
| ------ | -------- |
5454
| number | No |
5555

5656
### `target`
5757

58-
The node id of the element receiving the PressEvent.
58+
接收 LayoutEvent 的元素的节点 ID。
5959

6060
| Type | Optional |
6161
| --------------------------- | -------- |

‎cndocs/set-up-your-environment.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
id: set-up-your-environment
3+
title: Set Up Your Environment
4+
hide_table_of_contents: true
5+
---
6+
7+
import Tabs from '@theme/Tabs';
8+
import TabItem from '@theme/TabItem';
9+
import constants from '@site/core/TabsConstants';
10+
11+
import GuideLinuxAndroid from './\_getting-started-linux-android.md';
12+
import GuideMacOSAndroid from './\_getting-started-macos-android.md';
13+
import GuideWindowsAndroid from './\_getting-started-windows-android.md';
14+
import GuideMacOSIOS from './\_getting-started-macos-ios.md';
15+
16+
In this guide, you'll learn how to set up your environment, so that you can run your project with Android Studio and Xcode. This will allow you to develop with Android emulators and iOS simulators, build your app locally, and more.
17+
18+
:::note
19+
This guide requires Android Studio or Xcode. If you already have one of these programs installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.
20+
21+
<details>
22+
<summary>Is setting up my environment required?</summary>
23+
24+
Setting up your environment is not required if you're using a [Framework](/architecture/glossary#react-native-framework). With a React Native Framework, you don't need to setup Android Studio or XCode as a Framework will take care of building the native app for you.
25+
26+
If you have constraints that prevent you from using a Framework, or you'd like to write your own Framework, then setting up your local environment is a requirement. After your environment is set up, learn how to [get started without a framework](getting-started-without-a-framework).
27+
28+
</details>
29+
:::
30+
31+
#### Development OS
32+
33+
<Tabs groupId="os" queryString defaultValue={constants.defaultOs} values={constants.oses} className="pill-tabs">
34+
<TabItem value="macos">
35+
36+
#### Target OS
37+
38+
<Tabs groupId="platform" queryString defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
39+
<TabItem value="android">
40+
41+
[//]: # 'macOS, Android'
42+
43+
<GuideMacOSAndroid/>
44+
45+
</TabItem>
46+
<TabItem value="ios">
47+
48+
[//]: # 'macOS, iOS'
49+
50+
<GuideMacOSIOS/>
51+
52+
</TabItem>
53+
</Tabs>
54+
55+
</TabItem>
56+
<TabItem value="windows">
57+
58+
#### Target OS
59+
60+
<Tabs groupId="platform" queryString defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
61+
<TabItem value="android">
62+
63+
[//]: # 'Windows, Android'
64+
65+
<GuideWindowsAndroid/>
66+
67+
</TabItem>
68+
<TabItem value="ios">
69+
70+
[//]: # 'Windows, iOS'
71+
72+
## Unsupported
73+
74+
> A Mac is required to build projects with native code for iOS. You can use [Expo Go](https://expo.dev/go) from [Expo](environment-setup#start-a-new-react-native-project-with-expo) to develop your app on your iOS device.
75+
76+
</TabItem>
77+
</Tabs>
78+
79+
</TabItem>
80+
<TabItem value="linux">
81+
82+
#### Target OS
83+
84+
<Tabs groupId="platform" queryString defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
85+
<TabItem value="android">
86+
87+
[//]: # 'Linux, Android'
88+
89+
<GuideLinuxAndroid/>
90+
91+
</TabItem>
92+
<TabItem value="ios">
93+
94+
[//]: # 'Linux, iOS'
95+
96+
## Unsupported
97+
98+
> A Mac is required to build projects with native code for iOS. You can use [Expo Go](https://expo.dev/go) from [Expo](environment-setup#start-a-new-react-native-project-with-expo) to develop your app on your iOS device.
99+
100+
</TabItem>
101+
</Tabs>
102+
103+
</TabItem>
104+
</Tabs>

‎cndocs/statusbarios.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: statusbarios
3+
title: '🚧 StatusBarIOS'
4+
---
5+
6+
> **Deleted.** Use [`StatusBar`](statusbar.md) for mutating the status bar.
7+
8+
---

0 commit comments

Comments
 (0)