引言
背景：前两篇文章介绍了使用Trae开发了新闻阅读的微信小程序版本和桌面Electron版本。在前端的常用技术中，就差跨端app版本的了，这篇我们做一个React Native的版本的新闻阅读应用。
目的：利用AI IDE Trae来帮助我学习并写出一款新闻阅读APP。
计划
技术栈选择：React Native。对于前端来说，熟悉JS和React，开发起React Native学习成本较低。并且React Native经过多年发展，生态也比较成熟。所以选择React Native来完成开发。
方案设计： 继续沿用之前的设计。
新建项目：使用Trae帮我新建React Native项目。
开发调试：根据Trae的指导和代码补全等功能完成我的项目开发和调试。
效果展示：将编写的React Native应用展示出来。
新建项目
1，向Trae AI提问如何新建React Native项目。提供了两种方式使用 React Native CLI和使用 Expo CLI。并提示我选择哪种方法？
- 如果你需要使用原生代码或第三方原生模块，React Native CLI 是更好的选择。
- 如果你想快速开发，且不需要原生代码，Expo 是一个很好的选择。
2，选择Expo CLI的方式，初始化项目中选择tabs (TypeScript)模版，并用yarn web启动项目。
选择tabs (TypeScript)模版如下图：
启动效果如下图：
- 可以在Web上调试React Native效果太棒了，多年前我也开发过React Native应用，需要在电脑上安装Xcode/Android Studio，还有手机模拟器才能在调试代码，安装这些环境很麻烦，现在使用Expo可以快速在Web上调试方便多了。
- 选择tabs (TypeScript)模版会直接安装expo-router这个路由，通过向Trae AI提问学习到它是利用文件系统来自动创建路由，Nextjs也用的这种方式，这使得设置和使用路由变得更加简单和直观。
开发调试
1，我提问：我想开发一个新闻应用，有首页、列表页、详情页 帮我改造一下项目。并把我的设计图传给Trae AI。Trae AI给了我修改步骤，按照它的指示一步步修改我的项目。
我还提问了诸如：
- 帮我解释一下现在项目各文件的作用
- +html.tsx是干啥的文件
- 在 Web 浏览器中运行我的应用 这是什么原理 是将我的react native代码翻译成html吗
- 项目使用了 Expo Router，介绍一下改怎样使用这个路由
这些提问帮助我快速学习React Native的基本知识。还提问了
- react-native-snap-carousel 不支持 Web 环境 帮我换个轮播组件
- 将 two.tsx 改造为个人中心
- 添加新的路由页面用于新闻列表和详情
- 列表页的标题现在是category/[id] 怎样可以改成分类名称
这些提问帮助我快速的更改和调整代码。
效果展示
就这样，花了一个小时的时间，快速搞出了拥有首页、列表页、详情页，还顺便搞了个我的页面的APP新鲜出炉啦。
源码地址
我将实现的新闻应用各端都上传到了gitee。
cms-rn-app: gitee.com/DaBuChen/cm…
cms-wechart-miniprogram: gitee.com/DaBuChen/cm…
cms-electron-vue: gitee.com/DaBuChen/cm…
cms-web-vue: gitee.com/DaBuChen/cm…
四个新闻阅读应用项目链接放在上面，服务端和管理端项目同样可以在我的gitee仓库中查看。
总结
俗话说万事开头难，但是有了Trae，开头不再难，我先后在不熟悉小程序、Electron、React Native现状的情况下，利用Trae快速的搭建起了项目并实现了几个页面。有了开头，相信继续开发复杂的React Native等应用也是水到渠成的事，难不倒我们了。总的来说，Trae是款提效利器，如果你想学习新技术并进行一些实践，它是不错的选择。
