/wxRead

使用React-Native技术,模仿微信阅读开发

wxRead

使用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

image

image

image

image

image