使用React-Native技术,模仿微信阅读开发
搭建环境
参考:https://juejin.cn/post/6854573221908332551
1、安装 expo-cli:npm install expo-cli --global
2、创建项目:expo init my-new-project 会有两类模板让你选择:托管工作流,裸露工作流。
3、启动项目:cd my-new-project然后执行expo start启动项目
使用navigator导航栏
npm install @react-navigation/native或者yarn add @react-navigation/native
在项目录下执行
expo install react-native-screens react-native-safe-area-context添加expo支持
安装navigator依赖
npm install react-native-screens react-native-safe-area-context或者yarn add react-native-screens react-native-safe-area-context
使用Tab navigation
npm install @react-navigation/bottom-tabs或者yarn add @react-navigation/bottom-tabs
使用渐变色组件LinearGradient
使用expo install expo-linear-gradient安装渐变色支持
使用Card
npm install react-native-shadow-cards或者yarn add react-native-shadow-cards安装Card支持
使用顶部导航栏
yarn add @react-navigation/material-top-tabs react-native-tab-view 或者 npm install @react-navigation/material-top-tabs react-native-tab-view
添加expo支持
expo install react-native-pager-view
使用react-native-pager-view实现翻页
yarn add react-native-pager-view