React native project and package configuration process

Start knocking on the blackboard! !

　　Whether you are a novice or a veteran of RN, follow the process, the RN project is not a problem at all!

 

1. Website collection

Expo configuration URL: https://blog.expo.io/building-a-react-native-app-using-expo-and-typescript-part-1-a81b6970bb82

Tabbar URL: https://github.com/ptomasroos/react-native-tab-navigator

Tabbar style settings: https://www.npmjs.com/package/react-native-navigator

swiper URL: https://github.com/leecade/react-native-swiper

navigation URL: https://reactnavigation.org/docs/en/2.x/headers.html

camera URL: https://docs.expo.io/versions/v31.0.0/sdk/camera

switch URL: https://reactnavigation.cn/docs/ switch/

 

Two, installation

yarn global add create-react-native-app

create-react-native-app cookbooks

        ? Choose a template: blank

Yarn add typescript tslint --dev      can expose ts errors

yarn add @types/react @types/react-native @types/react-dom --dev   After installing react-dom, you can use ts based on the browser

yarn add concurrently rimraf react-native-scripts --dev    can switch the environment () automatic allocation of port numbers

yarn add ts-jest @types/jest @types/react-test-renderer --dev

tsc --init     initialization, you can create tsconfig.json file manually without this command

                 If you use this command, a tsconfig.js file will be automatically generated, delete all the contents, and copy the following configuration information completely　

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
}

 

Configure the npm expo-cli script scripts in the package.json file

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');

Delete the content of the App.js file and paste the following content:

App.js文件:
import App from './build/App';
export default App;

Create a src folder directory, and then drag the babel.config.js file to the src file directory!

 

After the configuration is complete, you can run directly.

yarn buildAndStart

At this time, a build file will be automatically generated, but there is only the babel.config.js file, but we need to have the App.js file in the build

So you need to create an App.tsx file under src, at this time you can write whatever you want, of course, you can also use the following code to try the effect.

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>
        )
    }
}

 

Three, tabbar introduction

yarn add react-native-tab-navigator　这个这个可能用到，可能用不到，如果找不到navigation，可以两个都装一下，非常靠谱！

yarn add @types/react-native-tab-navigator

 

四、Swiper引入

yarn add react-native-swiper

注意：引入Swipper的时候，你可能会发现swiper小点点不动了？

这个时候可以联想到nextTick,我们应该等数据来了再渲染，你可以试着判断一下你的渲染数据：
<strong>this.list.length>0? 渲染："null"</strong>

 

五、MobX引入

yarn add mobx

yarn add mobx-react    需要在App.tsx中引入provider、store

import { Provider} from "mobx-react"

 

六、路由引入

yarn add  [email protected]     有版本限制，需要注意

yarn add  @types/[email protected]  

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"

 

原文连接：https://www.cnblogs.com/zh-chen/p/10096732.html