React Native Sortable List 项目教程

React Native Sortable List 项目教程

react-native-sortable-listReact Native Sortable List component项目地址:https://gitcode.com/gh_mirrors/re/react-native-sortable-list

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

react-native-sortable-list/
├── LICENSE
├── README.md
├── index.js
├── package.json
├── src
│   ├── Row.js
│   ├── SortableList.js
│   └── styles.js
└── yarn.lock

• LICENSE: 项目的许可证文件。
• README.md: 项目的说明文档。
• index.js: 项目的入口文件。
• package.json: 项目的依赖管理文件。
• src: 项目的源代码目录。
  • Row.js: 列表中每一行的组件。
  • SortableList.js: 可排序列表的主要组件。
  • styles.js: 样式文件。
• yarn.lock: 依赖包的锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 index.js。这个文件导入了 SortableList 组件，并提供了一些示例数据和样式。以下是 index.js 的简化代码：

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import SortableList from './src/SortableList';

const data = {
  '1': { name: 'Item 1' },
  '2': { name: 'Item 2' },
  // 更多数据...
};

class Example extends Component {
  renderRow = ({ data, active }) => {
    return (
      <View style={[styles.row, active && styles.activeRow]}>
        <Text style={styles.text}>{data.name}</Text>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <SortableList
          style={styles.list}
          data={data}
          renderRow={this.renderRow}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  list: {
    flex: 1,
  },
  row: {
    padding: 20,
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  activeRow: {
    backgroundColor: '#ddd',
  },
  text: {
    fontSize: 18,
  },
});

AppRegistry.registerComponent('Example', () => Example);

3. 项目的配置文件介绍

项目的配置文件主要是 package.json。这个文件包含了项目的元数据和依赖项。以下是 package.json 的部分内容：

{
  "name": "react-native-sortable-list",
  "version": "1.0.0",
  "description": "A sortable list component for react native",
  "main": "index.js",
  "scripts": {
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-native": "^0.50.0"
  },
  "devDependencies": {
    "babel-jest": "^21.2.0",
    "jest": "^21.2.1",
    "react-test-renderer": "^16.0.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

• name: 项目的名称。
• version: 项目的版本号。
• description: 项目的描述。
• main: 项目的入口文件。
• scripts: 可执行的脚本命令。
• dependencies: 项目运行所需的依赖包。
• devDependencies: 开发环境所需的依赖包。
• jest: Jest 测试框架的配置。

react-native-sortable-listReact Native Sortable List component项目地址:https://gitcode.com/gh_mirrors/re/react-native-sortable-list