React Native Keyboard Controller 使用教程

React Native Keyboard Controller 使用教程

react-native-keyboard-controllerKeyboard manager which works in identical way on both iOS and Android项目地址:https://gitcode.com/gh_mirrors/re/react-native-keyboard-controller

1. 项目的目录结构及介绍

React Native Keyboard Controller 项目的目录结构如下：

react-native-keyboard-controller/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── index.tsx
│   ├── types.ts
│   ├── utils.ts
├── example/
│   ├── App.tsx
│   ├── index.js
│   ├── metro.config.js
│   ├── babel.config.js
│   ├── package.json
│   ├── tsconfig.json
├── .gitignore
├── .npmignore
├── README.md
├── package.json
├── tsconfig.json

目录结构介绍

• src/：包含项目的主要源代码。
  • components/：存放 React 组件。
  • hooks/：存放自定义 Hooks。
  • index.tsx：项目的入口文件。
  • types.ts：类型定义文件。
  • utils.ts：工具函数文件。
• example/：示例项目的目录。
  • App.tsx：示例应用的主文件。
  • index.js：示例项目的入口文件。
  • metro.config.js：Metro 配置文件。
  • babel.config.js：Babel 配置文件。
  • package.json：示例项目的依赖管理文件。
  • tsconfig.json：TypeScript 配置文件。
• .gitignore：Git 忽略文件配置。
• .npmignore：NPM 忽略文件配置。
• README.md：项目说明文档。
• package.json：项目依赖管理文件。
• tsconfig.json：TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.tsx，它是整个项目的入口点。该文件导入了项目的核心功能，并提供了对外的接口。

import { KeyboardController } from './components/KeyboardController';

export { KeyboardController };

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是部分关键内容：

{
  "name": "react-native-keyboard-controller",
  "version": "1.0.0",
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.64.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "eslint": "^7.14.0",
    "typescript": "^4.1.2"
  }
}

tsconfig.json

tsconfig.json 文件用于配置 TypeScript 编译选项。以下是部分关键内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

babel.config.js

babel.config.js 文件用于配置 Babel 编译选项。以下是部分关键内容：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

metro.config.js

metro.config.js 文件用于配置 Metro 打包工具。以下是部分关键内容：

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false

react-native-keyboard-controllerKeyboard manager which works in identical way on both iOS and Android项目地址:https://gitcode.com/gh_mirrors/re/react-native-keyboard-controller