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

cndocs/_getting-started-macos-ios.md

@@ -1,3 +1,5 @@
+import ThemedImage from '@theme/ThemedImage';
+
 ## 安装依赖
 
 必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods。
@@ -47,7 +49,13 @@ React Native 目前需要[Xcode](https://developer.apple.com/xcode/downloads/) 1
 
 启动 Xcode，并在`Xcode | Preferences | Locations`菜单中检查一下是否装有某个版本的`Command Line Tools`。Xcode 的命令行工具中包含一些必须的工具，比如`git`等。
 
-![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
+<ThemedImage
+alt="Xcode Command Line Tools 配置"
+sources={{
+    light: '/docs/assets/GettingStartedXcodeCommandLineTools.png',
+    dark: '/docs/assets/GettingStartedXcodeCommandLineToolsDark.png',
+  }}
+/>
 
 #### 在 Xcode 中安装 iOS 模拟器
 

cndocs/_integration-with-existing-apps-ios.md

@@ -1,3 +1,4 @@
+import ThemedImage from '@theme/ThemedImage';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import constants from '@site/core/TabsConstants';
@@ -68,7 +69,13 @@ yarn install
 
 安装命令行工具。选择 Xcode 菜单中的 **Settings...（或 Preferences...）**。转到位置面板，并安装工具，方法是选择命令行工具下拉菜单中最新的版本。
 
-![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
+<ThemedImage
+alt="Xcode Command Line Tools 配置"
+sources={{
+    light: '/docs/assets/GettingStartedXcodeCommandLineTools.png',
+    dark: '/docs/assets/GettingStartedXcodeCommandLineToolsDark.png',
+  }}
+/>
 
 ### CocoaPods
 
@@ -159,6 +166,7 @@ AppRegistry.registerComponent('HelloWorld', () => App);
 让我们创建一个 `App.tsx` 文件。这是一个 [TypeScript](https://www.typescriptlang.org/) 文件，可以包含 [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) 表达式。它包含我们要集成到 iOS 应用程序中的根 React Native 组件（<RNTemplateRepoLink href="template/App.tsx">链接</RNTemplateRepoLink>）：
 
 ```tsx
+import {type JSX} from 'react';
 import {
   SafeAreaView,
   ScrollView,
@@ -176,7 +184,7 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
-function App(): React.JSX.Element {
+function App(): JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
 
   const backgroundStyle = {

cndocs/intro-react.md

@@ -21,6 +21,12 @@ React Native 的基础是[React](https://zh-hans.react.dev/)， 是在 web 端
 
 本文档会用"Cat"这种有个名字和咖啡馆就能开始工作的人畜无害的生物来作为例子。下面是我们的第一个 Cat 组件:
 
+<Tabs groupId="component-style" queryString defaultValue="functional" values={[
+{label: '函数组件', value: 'functional'},
+{label: 'Class 组件', value: 'classical'},
+]}>
+<TabItem value="functional">
+
 ```SnackPlayer name=Your%20Cat
 import {Text} from 'react-native';
 
@@ -118,7 +124,6 @@ export default Cat;
 </TabItem>
 </Tabs>
 
-
 :::tip
 上面只是导出组件的写法之一。你还可以看看这篇博客整理[handy cheatsheet on JavaScript imports and exports](https://www.samanthaming.com/tidbits/79-module-cheatsheet/)整理的各种不同的写法。
 :::
@@ -377,7 +382,6 @@ export default CatApp;
 
 你可以使用[React 的`useState` Hook](https://zh-hans.react.dev/docs/hooks-state.html)来为组件添加状态。Hook （钩子）是一种特殊的函数，可以让你“钩住”一些 React 的特性。例如`useState`可以在函数组件中添加一个“状态钩子”，在函数组件重新渲染执行的时候能够保持住之前的状态。要了解更多，可以阅读[React 中有关 Hook 的文档](https://zh-hans.react.dev/docs/hooks-intro.html)。
 
-
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
@@ -461,6 +465,12 @@ export default Cafe;
 </TabItem>
 </Tabs>
 
+<Tabs groupId="component-style" queryString defaultValue="functional" values={[
+{label: '函数组件', value: 'functional'},
+{label: 'Class 组件', value: 'classical'},
+]}>
+<TabItem value="functional">
+
 首先要从 react 中引入`useState`：
 
 ```tsx
@@ -643,11 +653,10 @@ export default Cafe;
 </TabItem>
 </Tabs>
 
-
 :::info
 注意到上面的`<>`和`</>`了吗？ 这一对 JSX 标签称为[Fragments（片段）](https://zh-hans.react.dev/docs/fragments.html)。由于 JSX 的语法要求根元素必须为单个元素，如果我们需要在根节点处并列多个元素，在此前不得不额外套一个没有实际用处的`View`。但有了 Fragment 后就不需要引入额外的容器视图了。
 :::
 
 ---
 
-现在你应该已经差不多了解 React 和 React Native 的核心组件与思想了。下面可以试着深入学习一些核心组件的用法，比如如何[处理文本输入`<TextInput>`](handling-text-input)。
+现在你应该已经差不多了解 React 和 React Native 的核心组件与思想了。下面可以试着深入学习一些核心组件的用法，比如如何[处理文本输入`<TextInput>`](handling-text-input)。

cndocs/navigation.md

@@ -63,8 +63,7 @@ npm install @react-navigation/native @react-navigation/native-stack
 
 下面是一个包含首页和个人资料页的示例：
 
-```tsx
-import * as React from 'react';
+```tsx title="App.tsx"
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
@@ -93,10 +92,10 @@ export default function App() {
 
 在页面组件内部，可以使用 `useNavigation` Hook 获取 `navigation` 对象，该对象提供了跳转到其他页面的各种方法。例如，使用 `navigation.navigate` 跳转到 `Profile` 页面：
 
-```tsx
+```tsx title="HomeScreen.tsx"
 import {useNavigation} from '@react-navigation/native';
 
-function HomeScreen() {
+export default function HomeScreen() {
   const navigation = useNavigation();
 
   return (
@@ -108,8 +107,10 @@ function HomeScreen() {
     />
   );
 }
+```
 
-function ProfileScreen({route}) {
+```tsx title="ProfileScreen.tsx"
+export default function ProfileScreen({route}) {
   return <Text>This is {route.params.name}'s profile</Text>;
 }
 ```

cndocs/publishing-to-app-store.md

@@ -3,6 +3,8 @@ id: publishing-to-app-store
 title: 上架 App Store
 ---
 
+import ThemedImage from '@theme/ThemedImage';
+
 上架应用的过程和任何其它原生 iOS 应用一样，但有一些额外的注意事项要考虑。
 
 :::info
@@ -13,9 +15,15 @@ title: 上架 App Store
 
 需要在 Xcode 使用`Release` scheme 编译在 App Store 发布的 app。`Release`版本的应用会自动禁用开发者菜单，同时也会将 js 文件和静态图片打包压缩后内置到包中，这样应用可以在本地读取而无需访问开发服务器（同时这样一来你也无法再调试，需要调试请将 Build Configuration 再改为 debug）。
 
-要配置 app 为使用`Release` scheme 编译，请前往**Product** → **Scheme** → **Edit Scheme**。选择侧边栏的**Run**标签，然后设置下拉的 Build Configuration 为`Release`。
+要配置 app 为使用`Release` scheme 编译，请前往**Product** → **Scheme** → **Edit Scheme**。选择侧边栏的**Run**标签，然后设置下拉的 **Build Configuration** 为`Release`。
 
-![](/docs/assets/ConfigureReleaseScheme.png)
+<ThemedImage
+alt="Xcode Release Scheme 配置"
+sources={{
+    light: '/docs/assets/ConfigureReleaseScheme.png',
+    dark: '/docs/assets/ConfigureReleaseSchemeDark.png',
+  }}
+/>
 
 #### 优化技巧