React Native TextInput Effects 项目教程

React Native TextInput Effects 项目教程

react-native-textinput-effectsText inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.项目地址:https://gitcode.com/gh_mirrors/re/react-native-textinput-effects

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

react-native-textinput-effects/
├── src/
│   ├── effects/
│   │   ├── Akira.js
│   │   ├── Hoshi.js
│   │   ├── Isao.js
│   │   ├── Jiro.js
│   │   ├── Kaede.js
│   │   ├── Madoka.js
│   │   ├── Makiko.js
│   │   ├── Sae.js
│   │   ├── Shoko.js
│   │   └── TextInputEffects.js
│   ├── index.js
├── example/
│   ├── App.js
│   ├── index.js
│   ├── package.json
│   └── README.md
├── .gitignore
├── .npmignore
├── LICENSE
├── package.json
├── README.md

目录结构介绍

• src/: 包含项目的主要源代码。
  • effects/: 包含各种TextInput效果的实现文件。
  • index.js: 项目的入口文件，导出所有效果组件。
• example/: 包含一个示例应用，展示如何使用这些TextInput效果。
  • App.js: 示例应用的主要文件。
  • index.js: 示例应用的入口文件。
  • package.json: 示例应用的依赖配置文件。
  • README.md: 示例应用的说明文档。
• .gitignore: Git忽略文件配置。
• .npmignore: npm忽略文件配置。
• LICENSE: 项目许可证。
• package.json: 项目依赖配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

src/index.js

import { TextInputEffects } from './effects/TextInputEffects';

export {
  Akira,
  Hoshi,
  Isao,
  Jiro,
  Kaede,
  Madoka,
  Makiko,
  Sae,
  Shoko,
  TextInputEffects
} from './effects';

example/index.js

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('TextInputEffectsExample', () => App);

启动文件介绍

• src/index.js: 导出所有TextInput效果组件，供外部使用。
• example/index.js: 注册示例应用的入口组件，启动示例应用。

3. 项目的配置文件介绍

package.json

{
  "name": "react-native-textinput-effects",
  "version": "0.5.0",
  "description": "TextInput effects for React Native",
  "main": "src/index.js",
  "scripts": {
    "start": "react-native start",
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/halilb/react-native-textinput-effects.git"
  },
  "keywords": [
    "react-native",
    "textinput",
    "effects",
    "animated"
  ],
  "author": "Halil Bilir <hbilir@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/halilb/react-native-textinput-effects/issues"
  },
  "homepage": "https://github.com/halilb/react-native-textinput-effects#readme",
  "dependencies": {
    "prop-types": "^15.6.0"
  },
  "devDependencies": {
    "babel-jest": "^22.4.3",
    "babel-preset-react-native": "^4.0.0",
    "jest": "^22.4.3",
    "react": "^16.3.0-alpha.1",
    "react-native": "^0.54.0",
    "react-test-renderer": "^16.3.0-alpha.1"
  },
  "jest": {
   

react-native-textinput-effectsText inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.项目地址:https://gitcode.com/gh_mirrors/re/react-native-textinput-effects