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