开头敲黑板！！
　　无论你是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就整理到这里，希望能帮助到大家。

版权声明：本文为zh-chen原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zh-chen/p/10096732.html