React Native Custom Action Sheet 使用教程
1. 项目的目录结构及介绍
react-native-custom-action-sheet/
├── examples/
│ └── ...
├── lib/
│ └── ...
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── LICENSE
├── README.md
├── package.json
└── yarn.lock
- examples/: 包含示例代码,展示如何使用
react-native-custom-action-sheet
。 - lib/: 包含项目的主要代码和功能实现。
- .babelrc: Babel 配置文件,用于转换现代 JavaScript 代码。
- .editorconfig: 编辑器配置文件,用于统一代码风格。
- .eslintrc.js: ESLint 配置文件,用于代码检查。
- .gitignore: Git 忽略文件配置。
- .prettierrc.js: Prettier 配置文件,用于代码格式化。
- LICENSE: 项目许可证文件。
- README.md: 项目说明文档。
- package.json: 项目依赖和脚本配置文件。
- yarn.lock: Yarn 依赖锁定文件。
2. 项目的启动文件介绍
项目的启动文件通常是 index.js
或 App.js
,但在本项目中,启动文件可能位于 examples/
目录下,用于展示如何使用 react-native-custom-action-sheet
。
例如,examples/App.js
可能包含以下内容:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ActionSheet from 'react-native-custom-actionsheet';
const CANCEL_INDEX = 0;
const DESTRUCTIVE_INDEX = 4;
const options = ['Cancel', 'Apple', 'Banana', 'Watermelon', 'Durian'];
const title = 'Which one do you like?';
class DefaultExample extends React.Component {
state = { selected: '' };
showActionSheet = () => this.actionSheet.show();
getActionSheetRef = ref => (this.actionSheet = ref);
handlePress = index => this.setState({ selected: index });
render() {
return (
<View style={styles.wrapper}>
<Text style={{ marginBottom: 20 }}>
I like {options[this.state.selected]}
</Text>
<Text style={styles.button} onPress={this.showActionSheet}>
Default ActionSheet
</Text>
<ActionSheet
ref={this.getActionSheetRef}
title={title}
message="custom message"
options={options}
cancelButtonIndex={CANCEL_INDEX}
destructiveButtonIndex={DESTRUCTIVE_INDEX}
onPress={this.handlePress}
/>
</View>
);
}
}
const styles = StyleSheet.create({
wrapper: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
button: {
marginBottom: 20,
fontSize: 18,
color: 'blue',
},
});
export default DefaultExample;
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖、脚本和其他元数据。以下是一些关键部分:
{
"name": "react-native-custom-action-sheet",
"version": "1.0.0",
"description": "Cross platform custom ActionSheet",
"main": "lib/index.js",
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "^16.13.1",
"react-native": "^0.63.2",
"react-native-custom-actionsheet": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.11.0",
"@babel/runtime": "^7.11.2",
"babel-