feat: 添加详细文档和演示示例

Author: pinguo-zhouwei

Example/ModalSample.js

@@ -0,0 +1,84 @@
+import React, { Component } from "react";
+import {Text, TouchableHighlight, View, StyleSheet, TouchableWithoutFeedback, Image, StatusBar } from "react-native";
+import Modal from 'react-native-translucent-modal';
+
+export default class ModalSample extends Component {
+  state = {
+    modalVisible: false,
+  };
+
+  componentDidMount(){
+    StatusBar.setTranslucent(true);
+    StatusBar.setBackgroundColor('transparent');
+  }
+
+  setModalVisible(visible) {
+    this.setState({ modalVisible: visible });
+  }
+
+  render() {
+    return (
+      <View style={{ backgroundColor: '#fff', flex: 1 }}>
+        <Modal
+          transparent={true}
+          visible={this.state.modalVisible}
+          onRequestClose={() => {
+            alert("Modal has been closed.");
+            this.setModalVisible(!this.state.modalVisible);
+          }}
+        >
+          <TouchableWithoutFeedback onPress={() => this.setModalVisible(!this.state.modalVisible)}>
+            <View style={styles.wrapper}>
+              <View style={styles.container}>
+                <Image source={require('./img/test.png')} style={{ width: 285, height: 176}}/>
+                <Text style={styles.text}>领取礼包</Text>
+              </View>
+            </View>
+
+          </TouchableWithoutFeedback>
+        </Modal>
+
+
+        <View style={{flex: 1}}>
+          <Image source={{uri: 'https://hbimg.huabanimg.com/637f9f357c4a83df1aa3cf2087a0b12c654e24bd3ef566-SYrIQb_fw658'}} style={ styles.image }/>
+          <TouchableHighlight
+            onPress={() => {
+              this.setModalVisible(true);
+            }}
+          >
+            <Text>Show Modal</Text>
+          </TouchableHighlight>
+        </View>
+
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    backgroundColor: 'rgba(40, 40, 42, 0.6)',
+  },
+
+  image: {
+    height: 200,
+    resizeMode: 'cover',
+  },
+
+  text: {
+    fontSize: 16,
+    color: '#fff',
+  },
+
+  container: {
+    width: 285,
+    height: 176,
+    backgroundColor: '#efeff2',
+    overflow: 'hidden',
+    alignItems: 'center',
+    borderRadius: 12,
+  },
+});

Example/img/test.png

@@ -3,7 +3,7 @@
  */
 
 import {AppRegistry} from 'react-native';
-import App from './App';
+import App from './ModalSample';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

Example/index.js

@@ -0,0 +1,74 @@
+
+# react-native-translucent-modal
+A library for React Native Translucent Modal On Android
+
+### 背景
+react-native 提供的`Modal`组件在Android上显示时不能延伸到状态栏，为什呢？ 这与Android的原生实现有关，`Modal`组件对应到Android原生是用`Dialog`实现，因为 dialog 本身也不会延伸到状态栏的。如何让`Modal`在Android 上的显示效果能像在ios 设备上一样呢？这就是本库所提供的。使用很简单，只需要一行代码即可。
+
+### 效果对比
+
+使用`react-native-translucent-modal`之前：
+
+`splash`:
+
+<img src="/screen-shot/screenshot-before.jpg" width = "50%" height = "70%" alt="before1" align=center />
+
+>
+
+`弹窗：`
+
+<img src="/screen-shot/screenshot-pop-before.jpg" width = "50%" height = "70%" alt="before1" align=center />
+
+>
+
+使用`react-native-translucent-modal`之后：
+
+`splash`:
+
+<img src="/screen-shot/screenshot-after.jpg" width = "50%" height = "70%" alt="after1" align=center />
+
+>
+`弹窗`:
+
+<img src="/screen-shot/screenshot-pop-after.jpg" width = "50%" height = "70%" alt="after1" align=center />
+
+### 安装
+
+1、使用npm
+
+```
+$ npm install react-native-translucent-modal -save
+```
+
+或使用yarn
+
+```
+$ yarn add react-native-translucent-modal
+```
+
+2、然后link
+
+```
+$ react-native react-native-translucent-modal
+```
+
+### 使用
+
+`react-native-translucent-modal` 的使用与 react-native 提供`Modal`的组件完全一样，他们的属性和方法完全相同，你只需要将`Modal`的引入方式更改一下即可，其他的完全不用变
+
+```
+import { Modal } from "react-native";
+```
+
+改为
+
+```
+import Modal from 'react-native-translucent-modal';
+```
+
+好了，就只需要更改这一行代码，你的`Modal`现在就可以延伸到状态栏了。
+
+在ios端，仍然使用的是 `react-native` 提供的`Modal`组件，详情请看`MFTranslucentModal.ios.js`。
+
+
+

README-zh-rCN.md

@@ -1,56 +1,78 @@
 # react-native-translucent-modal
-A library for React Native translucent modal
+A library for React Native Translucent Modal On Android
 
-### 背景
-react-native 提供的`Modal`组件在Android上显示时不能延伸到状态栏，为什呢？ 这与Android的原生实现有关，`Modal`组件对应到Android原生是用`Dialog`实现，因为 dialog 本身也不会延伸到状态栏的。如何让`Modal`在Android 上的显示效果能像在ios 设备上一样呢？这就是本库所提供的。使用很简单，只需要一行代码即可。
+Chinese introduction：
+[中文文档介绍](/README-zh-rCN.md)
 
-### 效果对比
+### Background
+The `Modal` component provided by `react-native` does not extend to the status bar when displayed on Android. Why? This is related to the native implementation of Android. The `Modal` component corresponds to Android native implementation with `Dialog`, because the dialog itself does not extend to the status bar. How can I make `Modal` appear on Android like on an iOS device? This is what the library provides. It's very simple to use, just one line of code.
 
-使用`react-native-translucent-modal`之前：
+### Effect comparison
+
+Before using `react-native-translucent-modal`：
+
+`splash`:
 
 <img src="/screen-shot/screenshot-before.jpg" width = "50%" height = "70%" alt="before1" align=center />
 
 >
-使用`react-native-translucent-modal`之后：
 
+`Pop：`
+
+<img src="/screen-shot/screenshot-pop-before.jpg" width = "50%" height = "70%" alt="before1" align=center />
+
+>
+
+After using `react-native-translucent-modal`：
+
+`splash`:
 
 <img src="/screen-shot/screenshot-after.jpg" width = "50%" height = "70%" alt="after1" align=center />
 
+>
+`Pop`:
+
+<img src="/screen-shot/screenshot-pop-after.jpg" width = "50%" height = "70%" alt="after1" align=center />
+
 ### Setup
 
-1、使用npm
+1、Use npm
 
 ```
 $ npm install react-native-translucent-modal -save
 ```
 
-或使用yarn
+Or use yarn
 
 ```
 $ yarn add react-native-translucent-modal
 ```
 
-2、然后link
+2、then link
 
 ```
 $ react-native react-native-translucent-modal
 ```
 
 ### Usage
 
-`react-native-translucent-modal` 的使用与 react-native 提供`Modal`的组件完全一样，他们的属性和方法完全相同，你只需要将`Modal`的引入方式更改一下即可，其他的完全不用变
+The use of `react-native-translucent-modal` is exactly the same as that of the react-native providing `Modal`. Their properties and methods are exactly the same. You only need to change the import of `Modal`, the other is completely Don't change
 
 ```
 import { Modal } from "react-native";
 ```
 
-改为
+change to
 
 ```
 import Modal from 'react-native-translucent-modal';
 ```
 
-好了，就只需要更改这一行代码，你的`Modal`现在就可以延伸到状态栏了。
+Ok, just change this line of code, your `Modal` can now be extended to the status bar.
+
+On iOS devices, the `Modal` component provided by react native is still used., you can view the `MFTranslucentModal.ios.js` file for detail.
 
 
+### Thanks 
 
+thanks [react-native-modal-translucent](https://github.com/listenzz/react-native-modal-translucent) library for providing ideas