开头敲黑板!!
无论你是RN的新手还是老手,跟着流程走,RN项目搭建起来完全不是问题!
一、网址收集
expo配置网址:https://blog.expo.io/building-a-react-native-app-using-expo-and-typescript-part-1-a81b6970bb82
tabbar网址:https://github.com/ptomasroos/react-native-tab-navigator
tabbar样式设置:https://www.npmjs.com/package/react-native-navigator
swiper网址:https://github.com/leecade/react-native-swiper
navigation网址:https://reactnavigation.org/docs/en/2.x/headers.html
camera网址:https://docs.expo.io/versions/v31.0.0/sdk/camera
switch网址:https://reactnavigation.cn/docs/switch/
二、安装
yarn global add create-react-native-app
create-react-native-app cookbooks
? Choose a template: blank
yarn add typescript tslint --dev 可以把ts的错误暴露出来
yarn add @types/react @types/react-native @types/react-dom --dev react-dom安装后可以基于浏览器使用ts
yarn add concurrently rimraf react-native-scripts --dev 可以切换环境()端口号的自动分配
yarn add ts-jest @types/jest @types/react-test-renderer --dev
tsc --init 初始化,可以不用该命令,手工创建tsconfig.json文件
若使用该命令会自动生成一个tsconfig.js文件,删除里面所有内容,将下面的配置信息完全拷贝过去
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
|
配置package.json文件中的npm expo-cli脚本scripts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
1 2 |
|
1 2 |
|
删除App.js的文件内容,粘贴以下内容:
1 2 3 |
|
创建一个src文件夹目录,再将babel.config.js文件拖到src文件目录下!
配置完成,可以直接run了 。
yarn buildAndStart
此时会自动生成一个build文件,但里面只有babel.config.js文件,但我们需要让build里有App.js文件
所以需要在src下创建一个App.tsx文件,这时候你可以想写什么就写什么了,当然你也可以用下面的代码试试效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
三、tabbar 引入
yarn add react-native-tab-navigator 这个这个可能用到,可能用不到,如果找不到navigation,可以两个都装一下,非常靠谱!
yarn add @types/react-native-tab-navigator
四、Swiper引入
yarn add react-native-swiper
注意:引入Swipper的时候,你可能会发现swiper小点点不动了?
1 2 |
|
五、MobX引入
yarn add mobx
yarn add mobx-react 需要在App.tsx中引入provider、store
1 |
|
六、路由引入
yarn add [email protected] 有版本限制,需要注意
yarn add @types/[email protected]
1 |
|
七、WebView
1 |
|
采用原生的方法把H5页面嵌入进去
注意:react-native是用前端技术开发原生APP,它不是混合式开发
八、camera引入(引入第三方包都需要提供ts支持)
yarn add @types/expo
1 2 |
|
Flip:镜头反转
点击拍照可以拿到图片的url,其实图片已经存入本地
react-native可以将所有的硬件设备挂起
九、switch引入
1 |
|
十、AsyncStorage引入
异步、持久的Key-Value存储系统
1 |
|
1 |
|
1 |
|
十一、上拉刷新、下拉加载 -- FlatList引入
1 |
|