dev: first version

Author: wangdicoder

lib/loading-bar.js

@@ -1,10 +1,27 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
 
-const LoadingBar = () => (
-	<View>
+const LoadingBar = ({ color, percent }) => {
+	const style = {
+		backgroundColor: color,
+		width: `${percent * 100}%`
+	};
+	return <View style={[styles.container, style]} />;
+};
 
-	</View>
-);
+LoadingBar.propTypes = {
+	color: PropTypes.string
+};
+
+const styles = StyleSheet.create({
+	container: {
+		position: 'absolute',
+		height: 3,
+		zIndex: 10,
+		top: 0,
+		left: 0,
+	},
+});
 
 export default LoadingBar;

lib/webview.js

@@ -8,13 +8,68 @@ export default class ProgressBarWebView extends React.PureComponent {
 
 	static propTypes = {
 		color: PropTypes.string,
+		errorColor: PropTypes.string,
+		disappearDuration: PropTypes.number,
+		onLoadProgress: PropTypes.func,
+		onError: PropTypes.func,
+		onLoadStart: PropTypes.func,
+		onLoadEnd: PropTypes.func,
 	};
 
+	static defaultProps = {
+		color: '#3B78E7',
+		errorColor: '#f30',
+		disappearDuration: 300,
+	};
+
+	state = {
+		percent: 0, //range:  0 - 1
+		color: this.props.color,
+		visible: false,
+	};
+
+	_onLoadProgress = (syntheticEvent) => {
+		this.setState({ percent: syntheticEvent.nativeEvent.progress });
+		const { onLoadProgress } = this.props;
+		onLoadProgress && onLoadProgress(syntheticEvent);
+	};
+
+	_onError = (syntheticEvent) => {
+		this.setState({ color: this.props.errorColor, percent: 1 });
+		const { onError } = this.props;
+		onError && onError(syntheticEvent);
+	};
+
+	_onLoadStart = (syntheticEvent) => {
+		this.setState({ visible: true });
+		const { onLoadStart } = this.props;
+		onLoadStart && onLoadStart(syntheticEvent);
+	};
+
+	_onLoadEnd = (syntheticEvent) => {
+		const { onLoadEnd, disappearDuration } = this.props;
+		this.timer = setTimeout(() => {
+			this.setState({ visible: false });
+		}, disappearDuration);
+		onLoadEnd && onLoadEnd(syntheticEvent);
+	};
+
+	componentWillUnmount(): void {
+		clearTimeout(this.timer);
+	}
+
 	render() {
+		const { percent, color, visible } = this.state;
 		return (
 			<View style={styles.container}>
-				<LoadingBar/>
-				<WebView {...this.props} />
+				{visible && <LoadingBar color={color} percent={percent}/>}
+				<WebView
+					onLoadStart={this._onLoadStart}
+					onLoadEnd={this._onLoadEnd}
+					onLoadProgress={this._onLoadProgress}
+					onError={this._onError}
+					{...this.props}
+				/>
 			</View>
 		);
 	}