Skip to content

docs(cndocs): sync ThemedImage, navigation code blocks, and fix intro-react Tabs - #1033

Merged
sunnylqm merged 1 commit into
productionfrom
auto-translate-20260614
Jun 14, 2026
Merged

docs(cndocs): sync ThemedImage, navigation code blocks, and fix intro-react Tabs#1033
sunnylqm merged 1 commit into
productionfrom
auto-translate-20260614

Conversation

@sunnylqm

@sunnylqm sunnylqm commented Jun 14, 2026

Copy link
Copy Markdown

翻译同步 — 2026-06-14

本次从上游同步了以下改动并修复了预存的构建问题:

翻译文件同步

文件 主要变更
_getting-started-macos-ios.md ThemedImage 迁移(Xcode CLI Tools 截图)+ 暗色主题图片
_integration-with-existing-apps-ios.md ThemedImage 迁移(Configure Release Scheme 截图)+ 暗色主题图片 + JSX.Element 类型更新
publishing-to-app-store.md ThemedImage 迁移(Configure Release Scheme 截图)+ 暗色主题图片 + "Build Configuration" 加粗
navigation.md 移除 React import、添加代码块标题、export default、拆分 ProfileScreen 独立代码块
intro-react.md 修复 state 部分孤立的 </TabItem> / <TabItem> 标签(添加缺失的 <Tabs> 包裹)

暗色主题静态资源

  • cnwebsite/static/docs/assets/ConfigureReleaseSchemeDark.png(新增)
  • cnwebsite/static/docs/assets/GettingStartedXcodeCommandLineToolsDark.png(新增)

cnwebsite 配置/依赖

本次上游合并未涉及 cnwebsite 配置或依赖变更(Docusaurus 3.10.1、React 19.2.7 等已是最新)。

构建验证

yarn --cwd cnwebsite build ✅ 通过(69s)。已有的 HTML minifier 警告(linking、permissionsandroid、pushnotificationios)为预存问题,与本次改动无关。

备注

  • EN 上游已 cut 0.86 版本文档,CN 尚未同步。0.86 版本 cut 需要单独处理。

Summary by CodeRabbit

  • Documentation
    • Updated documentation to support light and dark theme variants for images
    • Modernized code examples to use contemporary React and TypeScript syntax patterns
    • Reorganized tutorial content with tabbed views for different implementation approaches

…-react Tabs structure

- _getting-started-macos-ios.md: ThemedImage for Xcode CLI tools screenshot + dark variant
- _integration-with-existing-apps-ios.md: ThemedImage for configure release scheme + dark variant
- publishing-to-app-store.md: ThemedImage for configure release scheme + dark variant
- navigation.md: remove React import, add code block titles, export default, split ProfileScreen
- intro-react.md: fix orphaned Tabs/TabItem in state section (add proper wrapping Tabs)
@netlify

netlify Bot commented Jun 14, 2026

Copy link
Copy Markdown

Deploy Preview for reactnativecn failed. Why did it fail? →

Name Link
🔨 Latest commit 7dd9c80
🔍 Latest deploy log https://app.netlify.com/projects/reactnativecn/deploys/6a2eb5f7e1d6620008e8155b

@coderabbitai

coderabbitai Bot commented Jun 14, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

Documentation updates across five files: three iOS docs replace static screenshots with ThemedImage components for light/dark theme support; _integration-with-existing-apps-ios.md modernizes TypeScript JSX typing in an App.tsx example; navigation.md adds file titles to code blocks and updates component declarations to export default; intro-react.md wraps component examples in tabbed views and repositions the Fragments info block.

Changes

Documentation Improvements

Layer / File(s) Summary
ThemedImage replacements for screenshots
cndocs/_getting-started-macos-ios.md, cndocs/_integration-with-existing-apps-ios.md, cndocs/publishing-to-app-store.md
Adds @theme/ThemedImage imports and replaces static Markdown images with ThemedImage components supplying separate light and dark asset sources for Xcode Command Line Tools and release-scheme screenshots.
TypeScript JSX typing in App.tsx example
cndocs/_integration-with-existing-apps-ios.md
Adds import {type JSX} from 'react' and changes the App function return type from React.JSX.Element to JSX.Element in the embedded App.tsx code example.
navigation.md code block titles and export declarations
cndocs/navigation.md
Adds file title attributes to App.tsx, HomeScreen.tsx, and ProfileScreen.tsx code blocks; removes the explicit import * as React line; updates HomeScreen and ProfileScreen declarations to export default function.
intro-react.md Tabs structure and Fragments reordering
cndocs/intro-react.md
Wraps the first-component and State sections in component-style Tabs/TabItem containers for function vs. class component switching; moves the Fragments :::info explanation block earlier and removes its duplicate occurrence.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • reactnativecn/react-native-website#1030: Also refactors intro-react.md with tabbed JS/TS examples and adjusts the JSX Fragments explanation placement, directly overlapping with this PR's Tabs and Fragments reordering changes.

Poem

🐰 A rabbit hops through docs at night,
Swapping images for dark and light.
Tabs now flip from class to func,
Fragments moved — no duplicate junk!
Export default, titles too,
Clean and themed the whole way through! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main changes across five markdown files: ThemedImage implementation, navigation code block restructuring, and intro-react Tabs fixes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch auto-translate-20260614

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
cndocs/_integration-with-existing-apps-ios.md (2)

642-645: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Fix the Swift initialProperties call syntax.

The view(withModuleName:initialProperties:) call is missing the comma between the module name and the new argument, so this snippet will not compile as written.

🛠️ Suggested fix
-   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
+   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld", initialProperties: [
🤖 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/_integration-with-existing-apps-ios.md` around lines 642 - 645, The
Swift method call to view(withModuleName:initialProperties:) is missing a comma
between the two named parameters. Add a comma immediately after the "HelloWorld"
string and before the initialProperties: parameter label to fix the syntax
error. The method signature requires both withModuleName: and initialProperties:
arguments to be properly separated by a comma.

549-585: ⚠️ Potential issue | 🟡 Minor

Type the props parameter in the code example.

The example passes props.userID and props.token to the component, but the parameter is untyped. Users copying this code snippet into a strict TypeScript project will encounter implicit-any errors. Add an explicit type to make the example properly typed.

♻️ Suggested fix
+type AppProps = {
+  userID: string;
+  token: string;
+};
+
-function App(props): React.JSX.Element {
+function App(props: AppProps): React.JSX.Element {
🤖 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/_integration-with-existing-apps-ios.md` around lines 549 - 585, The
App function component accepts a props parameter that is untyped, which causes
implicit-any errors in strict TypeScript projects. Add an explicit type
annotation to the props parameter of the App function to specify the shape of
the props object containing userID and token. You can either define an interface
for the props object or use an inline type annotation directly on the parameter.
🤖 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.

Outside diff comments:
In `@cndocs/_integration-with-existing-apps-ios.md`:
- Around line 642-645: The Swift method call to
view(withModuleName:initialProperties:) is missing a comma between the two named
parameters. Add a comma immediately after the "HelloWorld" string and before the
initialProperties: parameter label to fix the syntax error. The method signature
requires both withModuleName: and initialProperties: arguments to be properly
separated by a comma.
- Around line 549-585: The App function component accepts a props parameter that
is untyped, which causes implicit-any errors in strict TypeScript projects. Add
an explicit type annotation to the props parameter of the App function to
specify the shape of the props object containing userID and token. You can
either define an interface for the props object or use an inline type annotation
directly on the parameter.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: be70f24e-cb29-4b77-8309-380af99a45b7

📥 Commits

Reviewing files that changed from the base of the PR and between 02a4c75 and 7dd9c80.

⛔ Files ignored due to path filters (2)
  • cnwebsite/static/docs/assets/ConfigureReleaseSchemeDark.png is excluded by !**/*.png
  • cnwebsite/static/docs/assets/GettingStartedXcodeCommandLineToolsDark.png is excluded by !**/*.png
📒 Files selected for processing (5)
  • cndocs/_getting-started-macos-ios.md
  • cndocs/_integration-with-existing-apps-ios.md
  • cndocs/intro-react.md
  • cndocs/navigation.md
  • cndocs/publishing-to-app-store.md

@sunnylqm
sunnylqm merged commit baa8806 into production Jun 14, 2026
1 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant