Skip to content

yunaichun/rn_study

Repository files navigation

简介

此项目是学习 React Native 的项目,记录学习的点滴,方便以后忘记可以从学习轨迹中迅速上手。

目录结构

├── App.js                                         入口文件
└── lib
    ├── demo                                       学习demo
       ├── AsyncStorage                            本地缓存             
       ├── fetch                                   接口请求
       ├── flex                                    Flex布局
       ├── initinalApp.js                          初始化项目App.js文件
       ├── list
           ├── FlatList                            高性能列表组件
           ├── SectionList                         高性能列表组件
           └── StackNavigator
       ├── navigator
           ├── createBottomTabNavigator            底部导航
           ├── createDrawerNavigator               抽屉导航
           ├── createMaterialTopTabNavigator       顶部导航
           ├── createStackNavigator                路由跳转
           ├── createSwitchNavigator               无法返回导航
           └── pages
       └── offlineCaching                          离线缓存策略
    └── src                                        当前项目
       ├── actions                                 redux actions  
       ├── common                                  公用组件       
       ├── components                              页面组件
       ├── config                                  环境配置
       ├── data                                    静态数据
       ├── reducers                                redux reducers         
       ├── routers                                 react-navigation 导航配置
       ├── service                                 本地缓存和请求
       ├── store                                   redux store
       └── util                                    通用方法

项目启动

// == 安装 npm 依赖
$ npm install

// == 卸载 react-native-vector-icons
$ npm uninstall react-native-vector-icons --save

// 安装 pod 依赖
$ cd ios
$ pod install

// == 重新安装 react-native-vector-icons
$ npm install react-native-vector-icons --save

// == 运行
$ npm run ios

注意事项

  • react-native link react-native-vector-icons 出错,参考地址
  • react-native link react-native-webview 出错,参考地址
  • 因为 react-native-vector-icons 是手动 link 的,所以如果需要安装其他需要自动 link 的 npm 包【如 react-native-webview】,均需要卸载 react-native-vector-icons 包后,重新 pod install

学习笔记

参考资料

官网

布局

导航器

高性能列表组件

离线缓存策略

混合开发

打包和上架

视频教程

About

react-native学习与实战项目

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published