React-native完整配置流程

开头敲黑板！！

　　无论你是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文件，删除里面所有内容，将下面的配置信息完全拷贝过去　

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就整理到这里，希望能帮助到大家。