diff --git a/cndocs/_getting-started-macos-ios.md b/cndocs/_getting-started-macos-ios.md index d0d106e449b..e3b8da491cf 100644 --- a/cndocs/_getting-started-macos-ios.md +++ b/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) + #### 在 Xcode 中安装 iOS 模拟器 diff --git a/cndocs/_integration-with-existing-apps-ios.md b/cndocs/_integration-with-existing-apps-ios.md index c30aa551c88..92f1c32e76c 100644 --- a/cndocs/_integration-with-existing-apps-ios.md +++ b/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) + ### CocoaPods @@ -159,6 +166,7 @@ AppRegistry.registerComponent('HelloWorld', () => App); 让我们创建一个 `App.tsx` 文件。这是一个 [TypeScript](https://www.typescriptlang.org/) 文件，可以包含 [JSX]() 表达式。它包含我们要集成到 iOS 应用程序中的根 React Native 组件（链接）： ```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 = { diff --git a/cndocs/intro-react.md b/cndocs/intro-react.md index 98445cf6c0b..9dcf3fe8399 100644 --- a/cndocs/intro-react.md +++ b/cndocs/intro-react.md @@ -21,6 +21,12 @@ React Native 的基础是[React](https://zh-hans.react.dev/)， 是在 web 端 本文档会用"Cat"这种有个名字和咖啡馆就能开始工作的人畜无害的生物来作为例子。下面是我们的第一个 Cat 组件: + + + ```SnackPlayer name=Your%20Cat import {Text} from 'react-native'; @@ -118,7 +124,6 @@ export default Cat; - :::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)。 - @@ -461,6 +465,12 @@ export default Cafe; + + + 首先要从 react 中引入`useState`： ```tsx @@ -643,11 +653,10 @@ export default Cafe; - :::info 注意到上面的`<>`和``了吗？ 这一对 JSX 标签称为[Fragments（片段）](https://zh-hans.react.dev/docs/fragments.html)。由于 JSX 的语法要求根元素必须为单个元素，如果我们需要在根节点处并列多个元素，在此前不得不额外套一个没有实际用处的`View`。但有了 Fragment 后就不需要引入额外的容器视图了。 ::: --- -现在你应该已经差不多了解 React 和 React Native 的核心组件与思想了。下面可以试着深入学习一些核心组件的用法，比如如何[处理文本输入``](handling-text-input)。 \ No newline at end of file +现在你应该已经差不多了解 React 和 React Native 的核心组件与思想了。下面可以试着深入学习一些核心组件的用法，比如如何[处理文本输入``](handling-text-input)。 diff --git a/cndocs/navigation.md b/cndocs/navigation.md index 410f5dffb5d..c7c93c5474e 100644 --- a/cndocs/navigation.md +++ b/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 This is {route.params.name}'s profile; } ``` diff --git a/cndocs/publishing-to-app-store.md b/cndocs/publishing-to-app-store.md index 71e70c34bda..73fda728412 100644 --- a/cndocs/publishing-to-app-store.md +++ b/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) + #### 优化技巧 diff --git a/cnwebsite/static/docs/assets/ConfigureReleaseSchemeDark.png b/cnwebsite/static/docs/assets/ConfigureReleaseSchemeDark.png new file mode 100644 index 00000000000..41da875b5ae Binary files /dev/null and b/cnwebsite/static/docs/assets/ConfigureReleaseSchemeDark.png differ diff --git a/cnwebsite/static/docs/assets/GettingStartedXcodeCommandLineToolsDark.png b/cnwebsite/static/docs/assets/GettingStartedXcodeCommandLineToolsDark.png new file mode 100644 index 00000000000..a8043e20104 Binary files /dev/null and b/cnwebsite/static/docs/assets/GettingStartedXcodeCommandLineToolsDark.png differ