sync

Author: sunnylqm

cndocs/build-speed.md

@@ -9,7 +9,9 @@ title: 优化编译速度
 为了减轻性能损失，本页面提供了一些建议来**改善您的构建时间**。
 
 :::info
-如果您注意到使用新架构在 Android 上构建时间较慢，请尽量升级 React Native 到最新版本。
+
+请注意，这些建议是高级功能，需要对原生构建工具有一定的了解。
+
 :::
 
 ## 仅在开发过程中构建一个 ABI（仅适用于 Android）
@@ -54,6 +56,32 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 
 一旦你构建了应用的**发布版本**，不要忘记移除这些标志，因为你希望构建一个适用于所有 ABI 而不仅仅是在日常开发流程中使用的那个的 apk/app bundle。
 
+
+## 启用 Gradle 配置缓存（仅适用于 Android）
+
+从 React Native 0.79 开始，您还可以启用 Gradle 配置缓存。
+
+当您使用 `yarn android` 运行 Android 构建时，您将执行一个由两个步骤组成的 Gradle 构建：
+
+- 配置阶段，当所有 `.gradle` 文件都被评估时。
+- 执行阶段，当任务实际执行时，Java/Kotlin 代码被编译等。
+
+您现在可以启用配置缓存，这将允许您在后续构建中跳过配置阶段。
+
+这对于频繁更改原生代码非常有用，因为它可以提高构建速度。
+
+例如，您可以看到在原生代码更改后重建 RN-Tester 时构建速度有多快：
+
+![gradle config caching](/docs/assets/gradle-config-caching.gif)
+
+您可以通过在 `android/gradle.properties` 文件中添加以下行来启用 Gradle 配置缓存：
+
+```
+org.gradle.configuration-cache=true
+```
+
+请参阅 [官方 Gradle 文档](https://docs.gradle.org/current/userguide/configuration_cache.html) 了解更多信息。
+
 ## 使用编译器缓存
 
 如果您经常运行本地构建（无论是 C++ 还是 Objective-C），您可能会从使用**编译器缓存**中受益。

cndocs/platform.md

@@ -7,26 +7,33 @@ title: Platform
 
 ```SnackPlayer name=Platform%20API%20Example&supportedPlatforms=ios,android
 import React from 'react';
-import { Platform, StyleSheet, Text, ScrollView } from 'react-native';
+import {Platform, StyleSheet, Text, ScrollView} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {
   return (
-    <ScrollView contentContainerStyle={styles.container}>
-      <Text>OS</Text>
-      <Text style={styles.value}>{Platform.OS}</Text>
-      <Text>OS Version</Text>
-      <Text style={styles.value}>{Platform.Version}</Text>
-      <Text>isTV</Text>
-      <Text style={styles.value}>{Platform.isTV.toString()}</Text>
-      {Platform.OS === 'ios' && <>
-        <Text>isPad</Text>
-        <Text style={styles.value}>{Platform.isPad.toString()}</Text>
-      </>}
-      <Text>Constants</Text>
-      <Text style={styles.value}>
-        {JSON.stringify(Platform.constants, null, 2)}
-      </Text>
-    </ScrollView>
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <ScrollView contentContainerStyle={styles.container}>
+          <Text>OS</Text>
+          <Text style={styles.value}>{Platform.OS}</Text>
+          <Text>OS Version</Text>
+          <Text style={styles.value}>{Platform.Version}</Text>
+          <Text>isTV</Text>
+          <Text style={styles.value}>{Platform.isTV.toString()}</Text>
+          {Platform.OS === 'ios' && (
+            <>
+              <Text>isPad</Text>
+              <Text style={styles.value}>{Platform.isPad.toString()}</Text>
+            </>
+          )}
+          <Text>Constants</Text>
+          <Text style={styles.value}>
+            {JSON.stringify(Platform.constants, null, 2)}
+          </Text>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
   );
 };
 
@@ -39,8 +46,8 @@ const styles = StyleSheet.create({
   value: {
     fontWeight: '600',
     padding: 4,
-    marginBottom: 8
-  }
+    marginBottom: 8,
+  },
 });
 
 export default App;
@@ -54,8 +61,8 @@ export default App;
 
 ### `constants`
 
-```jsx
-Platform.constants;
+```tsx
+static constants: PlatformConstants;
 ```
 
 Returns an object which contains all available common and specific constants related to the platform.
@@ -84,8 +91,8 @@ Returns an object which contains all available common and specific constants rel
 
 ### `isPad` <div class="label ios">iOS</div>
 
-```jsx
-Platform.isPad;
+```tsx
+static isPad: boolean;
 ```
 
 Returns a boolean which defines if device is an iPad.
@@ -98,8 +105,8 @@ Returns a boolean which defines if device is an iPad.
 
 ### `isTV`
 
-```jsx
-Platform.isTV;
+```tsx
+static isTV: boolean;
 ```
 
 Returns a boolean which defines if device is a TV.
@@ -110,10 +117,24 @@ Returns a boolean which defines if device is a TV.
 
 ---
 
+### `isVision`
+
+```tsx
+static isVision: boolean;
+```
+
+Returns a boolean which defines if device is an Apple Vision. _If you are using [Apple Vision Pro (Designed for iPad)](https://developer.apple.com/documentation/visionos/checking-whether-your-app-is-compatible-with-visionos) `isVision` will be `false` but `isPad` will be `true`_
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
 ### `isTesting`
 
-```jsx
-Platform.isTesting;
+```tsx
+static isTesting: boolean;
 ```
 
 Returns a boolean which defines if application is running in Developer Mode with testing flag set.
@@ -126,8 +147,8 @@ Returns a boolean which defines if application is running in Developer Mode with
 
 ### `OS`
 
-```jsx
-static Platform.OS
+```tsx
+static OS: 'android' | 'ios';
 ```
 
 Returns string value representing the current OS.
@@ -140,8 +161,8 @@ Returns string value representing the current OS.
 
 ### `Version`
 
-```jsx
-Platform.Version;
+```tsx
+static Version: 'number' | 'string';
 ```
 
 Returns the version of the OS.
@@ -154,8 +175,8 @@ Returns the version of the OS.
 
 ### `select()`
 
-```jsx
-static select(config: object): any
+```tsx
+static select(config: Record<string, T>): T;
 ```
 
 Returns the most fitting value for the platform you are currently running on.
@@ -177,45 +198,45 @@ The `config` parameter is an object with the following keys:
 
 **Example usage:**
 
-```jsx
-import { Platform, StyleSheet } from 'react-native';
+```tsx
+import {Platform, StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     ...Platform.select({
       android: {
-        backgroundColor: 'green'
+        backgroundColor: 'green',
       },
       ios: {
-        backgroundColor: 'red'
+        backgroundColor: 'red',
       },
       default: {
         // other platforms, web for example
-        backgroundColor: 'blue'
-      }
-    })
-  }
+        backgroundColor: 'blue',
+      },
+    }),
+  },
 });
 ```
 
 This will result in a container having `flex: 1` on all platforms, a green background color on Android, a red background color on iOS, and a blue background color on other platforms.
 
 Since the value of the corresponding platform key can be of type `any`, [`select`](platform.md#select) method can also be used to return platform-specific components, like below:
 
-```jsx
+```tsx
 const Component = Platform.select({
   ios: () => require('ComponentIOS'),
-  android: () => require('ComponentAndroid')
+  android: () => require('ComponentAndroid'),
 })();
 
 <Component />;
 ```
 
-```jsx
+```tsx
 const Component = Platform.select({
   native: () => require('ComponentForNative'),
-  default: () => require('ComponentForWeb')
+  default: () => require('ComponentForWeb'),
 })();
 
 <Component />;

cnwebsite/package.json

@@ -14,22 +14,28 @@
     "start": "docusaurus start",
     "build": "docusaurus build && yarn run update-redirect ./build/_redirects ./versions.json",
     "build:fast": "PREVIEW_DEPLOY=true yarn run build",
+    "tsc": "npx tsc --noEmit",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "serve": "docusaurus serve",
     "clear": "docusaurus clear",
     "test": "yarn build",
     "version:cut": "docusaurus docs:version",
-    "format:source": "prettier --write {{core,src}/**/*.js,*.js}",
-    "format:markdown": "prettier --write ../docs/*.md && prettier --write {{versioned_docs,src}/**/*.md,blog/*.md}",
+    "format:source": "prettier --write '{core,src}/**/*.{js,jsx,ts,tsx}'",
+    "format:markdown": "prettier --write ../docs/*.md && prettier --write {versioned_docs/**/*.md,blog/*.md}",
     "format:style": "prettier --write src/**/*.{scss,css}",
+    "format:examples": "eslint-examples-js --fix && eslint-examples-tsx --fix",
     "prettier": "yarn format:source && yarn format:markdown && yarn format:style",
-    "lint": "eslint ../docs/** blog/** core/** src/**/*.{js,md} ./*.js",
+    "lint": "eslint ../docs/** blog/** \"{core,src}/**/*.{js,jsx,ts,tsx}\"",
+    "lint:examples": "eslint-examples-js && eslint-examples-tsx && tsc-examples",
     "lint:versioned": "eslint versioned_docs/**",
-    "language:lint": "cd ../ && alex",
-    "language:lint:versioned": "cd ../ && alex .",
-    "ci:lint": "yarn lint && yarn lint:versioned && yarn language:lint:versioned",
-    "pwa:generate": "npx pwa-asset-generator ./static/img/header_logo.svg ./static/img/pwa --background #20232a --icon-only -opaque true --maskable true --type png"
+    "lint:markdown": "remark ../docs --quiet -r .remarkrc.mjs",
+    "lint:markdown:versioned": "remark ./versioned_docs --quiet -r .remarkrc.mjs",
+    "lint:format": "prettier --check '{core,src}/**/*.{js,jsx,ts,tsx}' ../docs/*.md {versioned_docs/**/*.md,blog/*.md} src/**/*.{scss,css}",
+    "language:lint": "cd ../ && alex && case-police 'docs/*.md' -d ./website/react-native-dict.json --disable SDK,URI",
+    "language:lint:versioned": "cd ../ && alex . && case-police '**/*.md' -d ./website/react-native-dict.json --disable SDK,URI",
+    "ci:lint": "yarn lint && yarn lint:examples && yarn lint:versioned && yarn language:lint:versioned && yarn lint:markdown && yarn lint:format",
+    "pwa:generate": "npx pwa-asset-generator ./static/img/header_logo.svg ./static/img/pwa --padding '40px' --background 'rgb(32, 35, 42)' --icon-only --opaque true"
   },
   "browserslist": {
     "production": [
@@ -62,9 +68,12 @@
     "@react-native-website/lint-examples": "0.0.0",
     "@react-native-website/update-redirects": "0.0.0",
     "@types/google.analytics": "^0.0.46",
-    "alex": "^10.0.0",
+    "alex": "^11.0.1",
+    "case-police": "^1.0.0",
+    "eslint": "^8.57.1",
     "fs-extra": "^11.2.0",
     "glob": "^11.0.0",
+    "prettier": "^3.5.3",
     "remark-cli": "^12.0.1",
     "typescript": "^5.7.2"
   }