React Native Scroll Into View 使用教程

React Native Scroll Into View 使用教程

react-native-scroll-into-viewScroll a ReactNative View into the visible screen. Similar to DOMElement.scrollIntoView() browser function.项目地址:https://gitcode.com/gh_mirrors/re/react-native-scroll-into-view

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

react-native-scroll-into-view/
├── src/
│   ├── index.js
│   ├── ScrollIntoView.js
│   ├── ScrollIntoViewPropTypes.js
│   ├── ScrollIntoViewWithRef.js
│   └── utils.js
├── example/
│   ├── App.js
│   ├── index.js
│   ├── package.json
│   └── README.md
├── .gitignore
├── .npmignore
├── LICENSE
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• src/: 包含项目的主要源代码文件。
  • index.js: 项目的入口文件。
  • ScrollIntoView.js: 主要功能实现文件。
  • ScrollIntoViewPropTypes.js: 类型检查文件。
  • ScrollIntoViewWithRef.js: 带有引用功能的实现文件。
  • utils.js: 工具函数文件。
• example/: 包含示例应用的代码。
  • App.js: 示例应用的主文件。
  • index.js: 示例应用的入口文件。
  • package.json: 示例应用的依赖配置文件。
  • README.md: 示例应用的说明文件。
• .gitignore: Git忽略文件配置。
• .npmignore: npm忽略文件配置。
• LICENSE: 项目许可证。
• package.json: 项目依赖配置文件。
• README.md: 项目说明文件。
• yarn.lock: Yarn锁定文件。

2. 项目的启动文件介绍

src/index.js

这是项目的入口文件，负责导出主要功能模块：

import ScrollIntoView from './ScrollIntoView';
import ScrollIntoViewWithRef from './ScrollIntoViewWithRef';

export { ScrollIntoView, ScrollIntoViewWithRef };

example/index.js

这是示例应用的入口文件，负责启动示例应用：

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

3. 项目的配置文件介绍

package.json

这是项目的主要配置文件，包含了项目的名称、版本、依赖等信息：

{
  "name": "react-native-scroll-into-view",
  "version": "1.0.0",
  "description": "Scroll a React Native view into the visible area of a ScrollView",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/slorber/react-native-scroll-into-view.git"
  },
  "keywords": [
    "react-native",
    "scroll",
    "scrollview",
    "scroll-into-view"
  ],
  "author": "Sébastien Lorber",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/slorber/react-native-scroll-into-view/issues"
  },
  "homepage": "https://github.com/slorber/react-native-scroll-into-view#readme",
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  }
}

example/package.json

这是示例应用的配置文件，包含了示例应用的依赖信息：

{
  "name": "example",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios"
  },
  "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.2",
   

react-native-scroll-into-viewScroll a ReactNative View into the visible screen. Similar to DOMElement.scrollIntoView() browser function.项目地址:https://gitcode.com/gh_mirrors/re/react-native-scroll-into-view