React projeto nativo e processo de configuração de pacote

Comece a bater no quadro-negro! !

　　Seja você um novato ou um veterano do RN, siga o processo, o projeto do RN não é problema nenhum!

 

1. Coleção do site

URL de configuração da Expo: https://blog.expo.io/building-a-react-native-app-using-expo-and-typescript-part-1-a81b6970bb82

URL da barra de tabulação: https://github.com/ptomasroos/react-native-tab-navigator

Configurações de estilo da barra de guias: https://www.npmjs.com/package/react-native-navigator

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

URL de navegação: https://reactnavigation.org/docs/en/2.x/headers.html

URL da câmera: https://docs.expo.io/versions/v31.0.0/sdk/camera

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

 

Dois, instalação

yarn global add create-react-native-app

livros de receitas criar-reagir-nativo-app

        ? Escolha um modelo:  em branco

Yarn add typescript tslint --dev      pode expor erros ts

yarn add @ types / react @ types / react-native @ types / react-dom --dev   Depois de instalar o react -dom, você pode usar ts baseado no navegador

yarn adiciona simultaneamente rimraf react-native-scripts --dev    pode mudar o ambiente () alocação automática de números de porta

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

    inicialização tsc --init , você pode criar o arquivo tsconfig.json manualmente sem este comando

                 Se você usar este comando, um arquivo tsconfig.js será gerado automaticamente, exclua todo o conteúdo e copie as seguintes informações de configuração completamente　

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 os scripts de script npm expo-cli no arquivo package.json

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

Exclua o conteúdo do arquivo App.js e cole o seguinte conteúdo:

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

Crie um diretório de pasta src e arraste o arquivo babel.config.js para o diretório de arquivo src!

 

Depois que a configuração for concluída, você pode executar diretamente.

yarn buildAndStart

Neste momento, um arquivo de construção será gerado automaticamente, mas há apenas o arquivo babel.config.js, mas precisamos ter o arquivo App.js na construção

Portanto, você precisa criar um arquivo App.tsx em src, neste momento você pode escrever o que quiser, é claro, você também pode usar o código a seguir para experimentar o efeito.

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

 

Três, introdução tabbar

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