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 测试框架的配置。