ネイティブプロジェクトとパッケージの構成プロセスに反応する

黒板をたたき始めます！！

　　RNの初心者でもベテランでも、プロセスに従ってください。RNプロジェクトはまったく問題ありません。

 

1.ウェブサイトコレクション

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

タブバーURL：https : //github.com/ptomasroos/react-native-tab-navigator

タブバースタイルの設定：https://www.npmjs.com/package/react-native-navigator

スワイパーURL：https : //github.com/leecade/react-native-swiper

ナビゲーションURL：https : //reactnavigation.org/docs/en/2.x/headers.html

カメラのURL：https : //docs.expo.io/versions/v31.0.0/sdk/camera

スイッチURL：https : //reactnavigation.cn/docs/ switch /

 

2、インストール

糸グローバル追加create-react-native-app

create-react-native-appクックブック

        ？テンプレートを選択：  空白

Yarn add typescript tslint --dev      はtsエラーを公開する可能性があります

yarn add @ types / react @ types / react-native @ types / react-dom --dev   react-domをインストールしたら、ブラウザーに基づいてtsを使用できます

糸は同時にrimraf反応ネイティブスクリプトを追加します--dev    は環境を切り替えることができます（）ポート番号の自動割り当て

糸追加ts-jest @ types / jest @ types / react-test-renderer --dev

tsc --init     初期化、このコマンドなしで手動でtsconfig.jsonファイルを作成できます

                 このコマンドを使用すると、tsconfig.jsファイルが自動的に生成され、すべての内容が削除され、以下の構成情報が完全にコピーされます　

1 2 ３ 4 5 6 7 8 9 10 11 12 13 14 15 16 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 }

 

package.jsonファイルでnpm expo-cliスクリプトスクリプトを構成する

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ファイルディレクトリーにドラッグします。

 

構成が完了したら、直接実行できます。

糸のビルドとスタート

この時点では、ビルドファイルが自動的に生成されますが、babel.config.jsファイルしかありませんが、ビルドには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>
        )
    }
}

 

3、タブバーの紹介

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