React-native完整配置流程

时间:2024-07-24 18:04:44
开头敲黑板!!
  无论你是RN的新手还是老手,跟着流程走,RN项目搭建起来完全不是问题!
一、网址收集
tabbar样式设置:https://www.npmjs.com/package/react-native-navigator
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文件,删除里面所有内容,将下面的配置信息完全拷贝过去 
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
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 "
}
修改package.json中的入口文件:
"main":"./node_modules/react-native-scripts/build/bin/crna-entry.js"
此时可以看见node_modules/react-native-scripts/build/bin/crna-entry.js文件中的
var _App = require('../../../../App');

删除App.js的文件内容,粘贴以下内容:

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文件,这时候你可以想写什么就写什么了,当然你也可以用下面的代码试试效果。
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小点点不动了?
这个时候可以联想到nextTick,我们应该等数据来了再渲染,你可以试着判断一下你的渲染数据:
this.list.length>0? 渲染:"null"
五、MobX引入
yarn add mobx
yarn add mobx-react    需要在App.tsx中引入provider、store
import { Provider} from "mobx-react"
六、路由引入
yarn add  react-navigation@2.18.3     有版本限制,需要注意
yarn add  @types/react-navigation@2.0.24  
import { createStackNavigator } from "react-navigation

七、WebView

import { WebView } from "react-native"
采用原生的方法把H5页面嵌入进去
注意:react-native是用前端技术开发原生APP,它不是混合式开发
八、camera引入(引入第三方包都需要提供ts支持)
yarn add @types/expo
import { Text, View, TouchableOpacity } from 'react-native'
import { Camera, Permissions } from 'expo'
Flip:镜头反转
点击拍照可以拿到图片的url,其实图片已经存入本地
react-native可以将所有的硬件设备挂起
九、switch引入
import { Switch } from "react-native" 
十、AsyncStorage引入
  异步、持久的Key-Value存储系统
import { AsyncStorage } from "react-native"
await AsyncStorage.setItem('isShowMap', `${value}`);    // 第二个参数是字符串
const isShowMap =  Boolean(await AsyncStorage.getItem('isShowMap'));   // 返回值是一个字符串,需要转化为Boolean类型

十一、上拉刷新、下拉加载 -- FlatList引入  

import { FlatList } from "react-native"

上面只规整了import引入的方式,具体代码格式大家可以进RN官网再去看一下,当然!文章最上头有规整好网址,大家copy代码就能很happy的run了。

恩。RN就整理到这里,希望能帮助到大家。