TS版react-native三端同构设计

最新推荐文章于 2024-06-07 09:37:53 发布

心动音符

最新推荐文章于 2024-06-07 09:37:53 发布

阅读量845

点赞数 1

分类专栏： javascript React 文章标签： javascript typescript reactjs

本文链接：https://blog.youkuaiyun.com/qq_35179602/article/details/106181787

版权

什么是三端同构？

对于刚接触rn开发的同学可能不是太了解，简单介绍一下。三端指的是安卓、IOS、H5。rn本身就是跨平台框架，为了让RN能在不改动代码的情况下同时兼容H5，只需要引入一些库和配置一些细节即可。

本模板采用目前react-native@0.6x,react-navigation@5.x新版本，搭建ts开发环境。
新版本相关库的API与老rn版本有些是不兼容的，请不要随意更改主版本！

不管是对于刚入门RN的小白，还是熟练运用RN老版本的熟手，都能轻松上手
模板源码

搭建流程（从零起步）

1. 安装RN

照着官网配置开发环境，不熟悉客户端开发的前端可以选沙盒环境。但是建议一步步装客户端环境，毕竟现在跨平台时代。

2. 使用react-native来生成typescript模板

首先新版本的RN已经不再使用react-native-cli，也就是说我们不需要全局安装任何包。只要你的npm版本在5.2+，可以使用npx命令（npx介绍）即可。

npx react-native init MyApp --template react-native-template-typescript

npx生成rn for ts模板，安装完成后这就是一个官方可运行的RN项目了，接下来我们就来修改这个模板

3. 配置package.json

为了使用新版本的@react-navigation v5搭建完整可用的RN开发项目、以及我们要做的三端同构，需要新增一些npm依赖的包。

"dependencies": {
    // ...模板自带的包
    // ...
    "@react-native-community/async-storage": "1.9.0",  // 相当于localStorage（可选）
    "@react-native-community/masked-view": "0.1.9",    // 路由所需要的包 (必须)
    "@react-navigation/stack": "5.2.10",    // 路由所需要的包 (必须)
    "react": "16.11.0",
    "react-dom": "16.11.0",
    "react-native": "0.62.2",
    "react-native-gesture-handler": "1.6.0",      // 路由所需要的包，原生手势系统 (必须)
    "react-native-reanimated": "^1.8.0",    // 路由所需要的包 (必须)
    "react-native-safe-area-context": "0.7.3",    // 路由所需要的包 (必须)
    "react-native-screens": "^2.3.0",    // 路由所需要的包 (必须)
    "react-native-webview": "8.0.0",    // RN打开webView容器，原生调用 (可选)
    "react-redux": "

最低0.47元/天解锁文章