docs(cndocs): sync translations — remove React imports, fix drift patterns, update cnwebsite config#1031
Open
sunnylqm wants to merge 1 commit into
Open
docs(cndocs): sync translations — remove React imports, fix drift patterns, update cnwebsite config#1031sunnylqm wants to merge 1 commit into
sunnylqm wants to merge 1 commit into
Conversation
… fix drift patterns, update cnwebsite config
Translation sync (92 cndocs files):
- Remove unused 'import React from react' (React 17+ JSX transform)
- Update 'import React, {useState}' → 'import {useState}' (named imports only)
- Convert jsx → tsx code fences where EN uses tsx exclusively
- Update /blob/master/ → /blob/main/ branch references
- Update reactjs.org → react.dev documentation URLs
- Update <div class= → <div className= (React DOM prop fix)
- Fix fullwidth ＃ → # heading characters (animatedvaluexy, appregistry, backhandler)
- Add SafeAreaView from react-native-safe-area-context in flexbox examples
- Add static position value to flexbox Position section
- Update yogalayout.com → yogalayout.dev links in flexbox
- Convert blockquote to :::caution admonition in flexbox
cnwebsite config sync:
- Update package.json: docusaurus-plugin-copy-page-button ^0.6.2→^0.8.0, react 19.2.6→19.2.7, sass 1.99.0→1.100.0, @types/react 19.2.14→19.2.16
- Replace PrismTheme.ts with PrismThemeDark.ts + PrismThemeLight.ts (light/dark theme split)
- Update docusaurus.config.ts to use new PrismTheme imports
❌ Deploy Preview for reactnativecn failed. Why did it fail? →
|
📝 WalkthroughWalkthroughThis PR comprehensively modernizes the React Native Chinese documentation by removing default React imports from 120+ code examples (reflecting the new JSX transform), reformatting markdown tables for consistency, updating external links to current domains and branches, refactoring code fence language tags, and restructuring Prism syntax highlighting theme configuration into separate light and dark modules. ChangesDocumentation Modernization
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
cndocs/communication-ios.md (1)
35-55:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winMissing React import for
React.Componentreference.The example code at line 41 extends
React.Component, but according to the AI summary, theimport React from 'react'statement was removed from this snippet. This will cause aReferenceError: React is not definedat runtime.While the modern JSX transform eliminates the need to import React for JSX syntax, class components still require the React import to reference
React.Component.🐛 Proposed fix
Add the React import back to the code example:
+import React from 'react'; import { View, Image } from 'react-native'; export default class ImageBrowserApp extends React.Component {Alternatively, if the goal is to demonstrate modern React patterns, convert to a function component:
+import {View, Image} from 'react-native'; -export default class ImageBrowserApp extends React.Component { - renderImage(imgURI) { +const ImageBrowserApp = ({images}) => { + const renderImage = (imgURI) => { return ( <Image source={{uri: imgURI}} /> ); - } - render() { + }; + + return ( - return ( - <View> - {this.props.images.map(this.renderImage)} - </View> - ); - } -} + <View> + {images.map(renderImage)} + </View> + ); +}; + +export default ImageBrowserApp;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@cndocs/communication-ios.md` around lines 35 - 55, The code example uses a class component extending React.Component (ImageBrowserApp and its renderImage method) but the React import is missing; add the missing import (import React from 'react') at the top so React.Component is defined, or alternatively refactor ImageBrowserApp to a function component (using hooks/props) to avoid needing React.Component—update the example to consistently use one approach.cndocs/flexbox.md (1)
2097-2179:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winBroken JSX structure: SafeAreaView only wraps width controls.
The SafeAreaProvider/SafeAreaView wrapper closes at lines 2178-2179, but the height controls (starting line 2180) and the
{children}content (line 2202) are rendered as siblings outside the SafeAreaProvider. This will cause a runtime error because PreviewLayout must return a single root element.Either:
- Move the closing
</SafeAreaView>and</SafeAreaProvider>tags to after line 2202 (before the final</View>), or- Wrap the entire PreviewLayout return in a single root View that contains the SafeAreaProvider
Looking at the structure, it appears an outer
<View style={{padding: 10, flex: 1}}>should open before line 2155, but it's missing in the current diff.🐛 Proposed fix
The PreviewLayout should return a single root. The SafeAreaView wrapper should likely only wrap the interactive preview area, not the control buttons. Move the SafeAreaProvider/SafeAreaView to wrap the
{children}content instead:const PreviewLayout = ({ children, widthType, heightType, widthValues, heightValues, setWidthType, setHeightType, }) => ( - <SafeAreaProvider> - <SafeAreaView style={{flex: 1, padding: 10}}> + <View style={{padding: 10, flex: 1}}> <View style={styles.row}> <Text style={styles.label}>width </Text> {widthValues.map((value) => ( ... ))} - </SafeAreaView> - </SafeAreaProvider> + </View> <View style={styles.row}> <Text style={styles.label}>height </Text> ... </View> - {children} + <SafeAreaProvider> + <SafeAreaView style={{flex: 1}}> + {children} + </SafeAreaView> + </SafeAreaProvider> </View> );🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@cndocs/flexbox.md` around lines 2097 - 2179, PreviewLayout currently returns broken JSX where SafeAreaProvider/SafeAreaView close before rendering the height controls and {children}, leaving multiple root siblings; fix PreviewLayout so it returns a single root element — either move the closing </SafeAreaView> and </SafeAreaProvider> to after the controls and {children} (so the SafeArea wrappers encompass the preview area and controls) or wrap everything in an outer <View style={{flex:1,padding:10}}> that contains the SafeAreaProvider/SafeAreaView and the width/height controls plus {children}; update the JSX around PreviewLayout, SafeAreaProvider, SafeAreaView and the {children} slot to ensure one root return.cndocs/textinput.md (2)
15-16:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRuntime error: React is not defined.
The code uses
React.useState(...)but doesn't import React. According to the AI summary, this PR removed the React import, which breaks these examples.Fix by importing and using
useStatedirectly:🔧 Proposed fix
Add the import at the top:
+import {useState} from 'react'; import {StyleSheet, TextInput} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';Then update the usage:
const TextInputExample = () => { - const [text, onChangeText] = React.useState('Useless Text'); - const [number, onChangeNumber] = React.useState(''); + const [text, onChangeText] = useState('Useless Text'); + const [number, onChangeNumber] = useState('');🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@cndocs/textinput.md` around lines 15 - 16, The examples use React.useState (e.g. the state hooks for text/onChangeText and number/onChangeNumber) but React is not imported; import the hook directly and update usages to call useState instead of React.useState — specifically add an import for useState from 'react' at the top and replace React.useState(...) occurrences for the text and number hooks so the examples compile.
59-59:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRuntime error: React is not defined.
Same issue as the first example -
React.useStateis used without importing React.🔧 Proposed fix
Add the import at the top:
+import {useState} from 'react'; import {TextInput, StyleSheet} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';Then update the usage:
const MultilineTextInputExample = () => { - const [value, onChangeText] = React.useState('Useless Multiline Placeholder'); + const [value, onChangeText] = useState('Useless Multiline Placeholder');🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@cndocs/textinput.md` at line 59, The runtime error occurs because React is not imported before using React.useState in the component; add an import for React at the top of the file (or import { useState } from 'react') and then either keep React.useState(...) or change the hook call to useState(...) to match the import; update the declaration using React.useState (const [value, onChangeText] = React.useState(...)) accordingly so React is defined when value and onChangeText are initialized.
🧹 Nitpick comments (1)
cndocs/animatedvaluexy.md (1)
80-82: ⚡ Quick winParameter table content appears corrupted or inconsistently translated.
The parameter tables contain mixed Chinese characters that don't match the rest of the documentation style. For example:
- "价值" (value), "编号" (ID), "功能" (function), "没有" (no), "是的" (yes)
These should either be:
- Consistently in English if this is English documentation, or
- Consistently in Chinese if this is Chinese documentation
The current state appears to be partially machine-translated content that wasn't properly reviewed. Please verify these tables match the intended documentation language and content accuracy.
Also applies to: 96-98, 134-136, 150-152, 176-178, 192-194
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@cndocs/animatedvaluexy.md` around lines 80 - 82, The parameter tables in animatedvaluexy.md contain mixed/incorrect translations (e.g., "价值", "编号", "功能", "没有", "是的") and malformed code examples like `{x：数字； y: 数字}`; replace these with consistent language and correct types across every occurrence (e.g., use "value" and "{x: number; y: number}" for English docs or the correct Chinese equivalents consistently if the doc is Chinese), and update the "Required" column to "yes"/"no" or "是"/"否" consistently; search for the same corrupted entries (the table rows currently showing "价值" and the malformed type) and fix them in all places mentioned so the parameter names, types, and required flags match the intended documentation language and formatting.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@cndocs/touchablehighlight.md`:
- Around line 119-121: Fix the Markdown table header that uses double pipes:
replace the header rows containing "类型" and the separator "--------" which
currently start with "||" so they read "| 类型 |" and "| -------- |" (i.e., change
"|| 类型 |" -> "| 类型 |" and "|| -------- |" -> "| -------- |") to correct the
table rendering in touchablehighlight.md.
---
Outside diff comments:
In `@cndocs/communication-ios.md`:
- Around line 35-55: The code example uses a class component extending
React.Component (ImageBrowserApp and its renderImage method) but the React
import is missing; add the missing import (import React from 'react') at the top
so React.Component is defined, or alternatively refactor ImageBrowserApp to a
function component (using hooks/props) to avoid needing React.Component—update
the example to consistently use one approach.
In `@cndocs/flexbox.md`:
- Around line 2097-2179: PreviewLayout currently returns broken JSX where
SafeAreaProvider/SafeAreaView close before rendering the height controls and
{children}, leaving multiple root siblings; fix PreviewLayout so it returns a
single root element — either move the closing </SafeAreaView> and
</SafeAreaProvider> to after the controls and {children} (so the SafeArea
wrappers encompass the preview area and controls) or wrap everything in an outer
<View style={{flex:1,padding:10}}> that contains the
SafeAreaProvider/SafeAreaView and the width/height controls plus {children};
update the JSX around PreviewLayout, SafeAreaProvider, SafeAreaView and the
{children} slot to ensure one root return.
In `@cndocs/textinput.md`:
- Around line 15-16: The examples use React.useState (e.g. the state hooks for
text/onChangeText and number/onChangeNumber) but React is not imported; import
the hook directly and update usages to call useState instead of React.useState —
specifically add an import for useState from 'react' at the top and replace
React.useState(...) occurrences for the text and number hooks so the examples
compile.
- Line 59: The runtime error occurs because React is not imported before using
React.useState in the component; add an import for React at the top of the file
(or import { useState } from 'react') and then either keep React.useState(...)
or change the hook call to useState(...) to match the import; update the
declaration using React.useState (const [value, onChangeText] =
React.useState(...)) accordingly so React is defined when value and onChangeText
are initialized.
---
Nitpick comments:
In `@cndocs/animatedvaluexy.md`:
- Around line 80-82: The parameter tables in animatedvaluexy.md contain
mixed/incorrect translations (e.g., "价值", "编号", "功能", "没有", "是的") and malformed
code examples like `{x：数字； y: 数字}`; replace these with consistent language and
correct types across every occurrence (e.g., use "value" and "{x: number; y:
number}" for English docs or the correct Chinese equivalents consistently if the
doc is Chinese), and update the "Required" column to "yes"/"no" or "是"/"否"
consistently; search for the same corrupted entries (the table rows currently
showing "价值" and the malformed type) and fix them in all places mentioned so the
parameter names, types, and required flags match the intended documentation
language and formatting.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d7ed3779-2645-4dd6-b022-e65bd8930d3e
📒 Files selected for processing (97)
cndocs/_integration-with-existing-apps-ios.mdcndocs/_integration-with-existing-apps-kotlin.mdcndocs/accessibilityinfo.mdcndocs/actionsheetios.mdcndocs/activityindicator.mdcndocs/alert.mdcndocs/animated.mdcndocs/animatedvaluexy.mdcndocs/animations.mdcndocs/appregistry.mdcndocs/appstate.mdcndocs/backhandler.mdcndocs/button.mdcndocs/communication-android.mdcndocs/communication-ios.mdcndocs/dimensions.mdcndocs/drawerlayoutandroid.mdcndocs/easing.mdcndocs/fabric-native-components.mdcndocs/flatlist.mdcndocs/flexbox.mdcndocs/handling-text-input.mdcndocs/handling-touches.mdcndocs/height-and-width.mdcndocs/i18nmanager.mdcndocs/image-style-props.mdcndocs/image.mdcndocs/imagebackground.mdcndocs/images.mdcndocs/improvingux.mdcndocs/inputaccessoryview.mdcndocs/interactionmanager.mdcndocs/intro-react-native-components.mdcndocs/intro-react.mdcndocs/introduction.mdcndocs/javascript-environment.mdcndocs/keyboard.mdcndocs/keyboardavoidingview.mdcndocs/layout-props.mdcndocs/layoutanimation.mdcndocs/legacy/direct-manipulation.mdcndocs/legacy/native-components-android.mdcndocs/legacy/native-modules-android.mdcndocs/legacy/native-modules-ios.mdcndocs/linking.mdcndocs/modal.mdcndocs/network.mdcndocs/optimizing-flatlist-configuration.mdcndocs/panresponder.mdcndocs/permissionsandroid.mdcndocs/pixelratio.mdcndocs/platform.mdcndocs/platformcolor.mdcndocs/pressable.mdcndocs/progressbarandroid.mdcndocs/props.mdcndocs/refreshcontrol.mdcndocs/safeareaview.mdcndocs/scrollview.mdcndocs/sectionlist.mdcndocs/settings.mdcndocs/shadow-props.mdcndocs/share.mdcndocs/state.mdcndocs/statusbar.mdcndocs/style.mdcndocs/stylesheet.mdcndocs/switch.mdcndocs/systrace.mdcndocs/text-style-props.mdcndocs/text.mdcndocs/textinput.mdcndocs/the-new-architecture/direct-manipulation.mdcndocs/the-new-architecture/fabric-component-native-commands.mdcndocs/the-new-architecture/native-modules-custom-events.mdcndocs/the-new-architecture/pure-cxx-modules.mdcndocs/toastandroid.mdcndocs/touchablehighlight.mdcndocs/touchablenativefeedback.mdcndocs/touchableopacity.mdcndocs/touchablewithoutfeedback.mdcndocs/transforms.mdcndocs/troubleshooting.mdcndocs/turbo-native-modules.mdcndocs/tutorial.mdcndocs/usecolorscheme.mdcndocs/usewindowdimensions.mdcndocs/using-a-listview.mdcndocs/using-a-scrollview.mdcndocs/vibration.mdcndocs/view-style-props.mdcndocs/view.mdcndocs/virtualizedlist.mdcnwebsite/core/PrismThemeDark.tscnwebsite/core/PrismThemeLight.tscnwebsite/docusaurus.config.tscnwebsite/package.json
💤 Files with no reviewable changes (33)
- cndocs/fabric-native-components.md
- cndocs/handling-touches.md
- cndocs/props.md
- cndocs/turbo-native-modules.md
- cndocs/legacy/native-modules-android.md
- cndocs/intro-react-native-components.md
- cndocs/height-and-width.md
- cndocs/style.md
- cndocs/usecolorscheme.md
- cndocs/systrace.md
- cndocs/usewindowdimensions.md
- cndocs/the-new-architecture/pure-cxx-modules.md
- cndocs/keyboardavoidingview.md
- cndocs/safeareaview.md
- cndocs/using-a-listview.md
- cndocs/platformcolor.md
- cndocs/button.md
- cndocs/view-style-props.md
- cndocs/progressbarandroid.md
- cndocs/using-a-scrollview.md
- cndocs/scrollview.md
- cndocs/refreshcontrol.md
- cndocs/legacy/native-modules-ios.md
- cndocs/vibration.md
- cndocs/the-new-architecture/direct-manipulation.md
- cndocs/toastandroid.md
- cndocs/introduction.md
- cndocs/_integration-with-existing-apps-ios.md
- cndocs/stylesheet.md
- cndocs/image-style-props.md
- cndocs/communication-android.md
- cndocs/the-new-architecture/native-modules-custom-events.md
- cndocs/the-new-architecture/fabric-component-native-commands.md
Comment on lines
+119
to
121
| || 类型 | | ||
| || -------- | | ||
| || function | |
There was a problem hiding this comment.
Markdown table formatting error.
The table header has an extra pipe character (|| instead of |), which will cause incorrect rendering.
📋 Proposed fix
-|| 类型 |
-|| -------- |
-|| function |
+| 类型 |
+| -------- |
+| function |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| || 类型 | | |
| || -------- | | |
| || function | | |
| | 类型 | | |
| | -------- | | |
| | function | |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@cndocs/touchablehighlight.md` around lines 119 - 121, Fix the Markdown table
header that uses double pipes: replace the header rows containing "类型" and the
separator "--------" which currently start with "||" so they read "| 类型 |" and
"| -------- |" (i.e., change "|| 类型 |" -> "| 类型 |" and "|| -------- |" -> "|
-------- |") to correct the table rendering in touchablehighlight.md.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Translation sync batch: align
cndocs/*with upstreamdocs/*and updatecnwebsiteconfig.Translation changes (92 cndocs files)
Mechanical pattern fixes applied across all candidates:
import React from 'react'(59 files) and updatedimport React, {useState}→import {useState}(33 files) to match React 17+ JSX transformjsx→tsxwhere EN uses tsx exclusively (flatlist, intro-react, pixelratio, sectionlist, panresponder, legacy/direct-manipulation)/blob/master/→/blob/main/(4 files)reactjs.org→react.dev(5 files),docs.expo.io→docs.expo.dev<div class=→<div className=(virtualizedlist)＃→#heading characters (animatedvaluexy, appregistry, backhandler)Content-level changes:
flexbox.md: Added SafeAreaView/SafeAreaProvider imports fromreact-native-safe-area-contextin code examples; addedstaticposition value (New Architecture only); updatedyogalayout.com→yogalayout.devlinks; converted blockquote to:::cautionadmonitioncnwebsite config sync
docusaurus-plugin-copy-page-button^0.6.2→^0.8.0,react/react-dom19.2.6→19.2.7,sass1.99.0→1.100.0,@types/react19.2.14→19.2.16PrismTheme.tswithPrismThemeDark.ts+PrismThemeLight.ts(light/dark theme split matching upstream)Build verification
yarn --cwd cnwebsite buildpasses (138s). Pre-existing HTML minifier warnings in versioned docs (linking, permissionsandroid, pushnotificationios) are unrelated.Files NOT changed (false positives from sync script)
8 stub files (checkbox, clipboard, datepickerandroid, datepickerios, imagepickerios, segmentedcontrolios, statusbarios, timepickerandroid) already have matching Chinese danger admonitions. ~60 other candidates were already aligned and only appeared due to timestamp-based comparison against
production(changes not yet merged).Summary by CodeRabbit
Documentation
Style
Chores