开头敲黑板!!
无论你是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 | tsconfig.json文件: { "compilerOptions" : { "module" : "es2015" , "target" : "es2015" , "jsx" : "react" , //jsx要配置成react,默认情况下没有,不然jsx解析会失败 "rootDir" : "src" , //入口文件夹,默认情况下没有src文件夹,所以还要在项目下创建一个src文件夹进行入口的编译 "outDir" : "build" , //输出文件夹,ts必须打成一个包,把ts转成js无法运行文件,所以先build再去run,同时加上watch每修改一次build一次 "allowSyntheticDefaultImports" : true , "noImplicitAny" : true , "sourceMap" : true , "experimentalDecorators" : true , "preserveConstEnums" : true , "allowJs" : true , "noUnusedLocals" : true , "noUnusedParameters" : true , "noImplicitReturns" : true , "skipLibCheck" : true , "moduleResolution" : "Node" }, "filesGlob" : [ "typings/index.d.ts" , "src/**/*.ts" , "src/**/*.tsx" , "node_modules/typescript/lib/lib.es6.d.ts" ], "types" : [ "react" , "react-dom" , "react-native" ], "exclude" :[ // exclude排除哪些配置项 "build" , "node_modules" , "jest.config.js" , "App.js" ], "compileOnSave" : false } |
配置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 | package .json文件: "scripts" : { "start" : "react-native-scripts start" , "eject" : "react-native-scripts eject" , "android" : "react-native-scripts android" , "ios" : "react-native-scripts ios" , "test" : "node node_modules/jest/bin/jest.js" , "lint" : "tslint src/**/*.ts" , "tsc" : "tsc" , "clean" : "rimraf build" , "build" : "yarn run clean && yarn run tsc --" , "watch" : "yarn run build -- -w" , "watchAndRunAndroid" : "concurrently \"yarn run watch\" \"yarn run android\"" , "buildRunAndroid" : "yarn run build && yarn run watchAndRunAndroid " , "watchAndRunIOS" : "concurrently \"yarn run watch\" \"yarn run ios\"" , "buildRunIOS" : "yarn run build && yarn run watchAndRunIOS " , "watchAndStart" : "concurrently \"yarn run watch\" \"yarn run start\"" , "buildAndStart" : "yarn run build && yarn run watchAndStart " } |
1 2 | 修改 package .json中的入口文件: "main" : "./node_modules/react-native-scripts/build/bin/crna-entry.js" |
1 2 | 此时可以看见node_modules/react-native-scripts/build/bin/crna-entry.js文件中的 var _App = require( '../../../../App' ); |
删除App.js的文件内容,粘贴以下内容:
1 2 3 | App.js文件: import App from './build/App' ; export default App; |
创建一个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 | App.tsx文件: import React from "react" import { View, Text } from "react-native" export default class componentName extends React.Component{ render(){ return ( <View> <Text>hello world</Text> </View> ) } } |
三、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 | 这个时候可以联想到nextTick,我们应该等数据来了再渲染,你可以试着判断一下你的渲染数据: <strong> this .list.length>0? 渲染: "null" </strong> |
五、MobX引入
yarn add mobx
yarn add mobx-react 需要在App.tsx中引入provider、store
1 | import { Provider} from "mobx-react" |
六、路由引入
yarn add react-navigation@2.18.3 有版本限制,需要注意
yarn add @types/react-navigation@2.0.24
1 | import { createStackNavigator } from "react-navigation |
七、WebView
1 | import { WebView } from "react-native" |
采用原生的方法把H5页面嵌入进去
注意:react-native是用前端技术开发原生APP,它不是混合式开发
八、camera引入(引入第三方包都需要提供ts支持)
yarn add @types/expo
1 2 | import { Text, View, TouchableOpacity } from 'react-native' import { Camera, Permissions } from 'expo' |
Flip:镜头反转
点击拍照可以拿到图片的url,其实图片已经存入本地
react-native可以将所有的硬件设备挂起
九、switch引入
1 | import { Switch } from "react-native" |
十、AsyncStorage引入
异步、持久的Key-Value存储系统
1 | import { AsyncStorage } from "react-native" |
1 | await AsyncStorage.setItem( 'isShowMap' , `${value}`); // 第二个参数是字符串 |
1 | const isShowMap = Boolean(await AsyncStorage.getItem( 'isShowMap' )); // 返回值是一个字符串,需要转化为Boolean类型 |
十一、上拉刷新、下拉加载 -- FlatList引入
1 | import { FlatList } from "react-native" |
原文连接:https://www.cnblogs.com/zh-chen/p/10096732.html