Reaccionar el proyecto nativo y el proceso de configuración de paquetes

¡Empieza a golpear la pizarra! !

　　Si usted es un novato o un veterano de RN, siga el proceso, ¡el proyecto RN no es un problema en absoluto!

 

1. Colección de sitios web

URL de configuración de la exposición: https://blog.expo.io/building-a-react-native-app-using-expo-and-typescript-part-1-a81b6970bb82

URL de la barra de pestañas: https://github.com/ptomasroos/react-native-tab-navigator

Configuración de estilo de la barra de pestañas: https://www.npmjs.com/package/react-native-navigator

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

URL de navegación: https://reactnavigation.org/docs/en/2.x/headers.html

URL de la cámara: https://docs.expo.io/versions/v31.0.0/sdk/camera

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

 

Dos, instalación

yarn global agregar crear-reaccionar-aplicación-nativa

crear-reaccionar-libros de cocina-aplicación-nativa

        ? Elija una plantilla: en  blanco

Yarn add mecanografiado tslint --dev      puede exponer ts errores

yarn add @ types / react @ types / react-native @ types / react-dom --dev   Después de instalar react-dom, puede usar ts basado en el navegador

yarn add concurrentemente rimraf react-native-scripts --dev    puede cambiar el entorno () asignación automática de números de puerto

hilo agregar ts-jest @ types / jest @ types / react-test-renderer --dev

tsc --init     initialization, puede crear el archivo tsconfig.json manualmente sin este comando

                 Si usa este comando, se generará automáticamente un archivo tsconfig.js, elimine todo el contenido y copie la siguiente información de configuración por completo　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 dieciséis 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

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 los scripts de script npm expo-cli en el archivo package.json

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 dieciséis 17 18 19

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

Elimine el contenido del archivo App.js y pegue el siguiente contenido:

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

Cree un directorio de carpetas src y luego arrastre el archivo babel.config.js al directorio de archivos src.

 

Una vez completada la configuración, puede ejecutarla directamente.

hilo buildAndStart

En este momento, se generará automáticamente un archivo de compilación, pero solo existe el archivo babel.config.js, pero necesitamos tener el archivo App.js en la compilación

Entonces necesitas crear un archivo App.tsx bajo src. En este momento, puedes escribir lo que quieras. Por supuesto, también puedes usar el siguiente código para probar el efecto.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 dieciséis

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

 

Tres, introducción a la barra de pestañas

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