diff --git a/react_native/5_1.png b/react_native/5_1.png
new file mode 100644
index 0000000..93679d2
Binary files /dev/null and b/react_native/5_1.png differ
diff --git a/react_native/5_2.png b/react_native/5_2.png
new file mode 100644
index 0000000..e9d34db
Binary files /dev/null and b/react_native/5_2.png differ
diff --git a/react_native/5_3.png b/react_native/5_3.png
new file mode 100644
index 0000000..0842d09
Binary files /dev/null and b/react_native/5_3.png differ
diff --git a/react_native/5_4.png b/react_native/5_4.png
new file mode 100644
index 0000000..426ee10
Binary files /dev/null and b/react_native/5_4.png differ
diff --git a/react_native/5_5.png b/react_native/5_5.png
new file mode 100644
index 0000000..456f563
Binary files /dev/null and b/react_native/5_5.png differ
diff --git a/react_native/5_7.png b/react_native/5_7.png
new file mode 100644
index 0000000..1fbce98
Binary files /dev/null and b/react_native/5_7.png differ
diff --git a/react_native/5_8.png b/react_native/5_8.png
new file mode 100644
index 0000000..d9fa9f4
Binary files /dev/null and b/react_native/5_8.png differ
diff --git a/react_native/5_9.png b/react_native/5_9.png
new file mode 100644
index 0000000..7abbdaa
Binary files /dev/null and b/react_native/5_9.png differ
diff --git a/react_native/第5篇UI组件.md b/react_native/第5篇UI组件.md
new file mode 100644
index 0000000..230d977
--- /dev/null
+++ b/react_native/第5篇UI组件.md
@@ -0,0 +1,50 @@
+
+
+
+
+#React-Native入门指南
+##第5篇UI组件
+###一、目前React-Native支持的组件
+ 在facebook React-native的官网可以看到目前支持的组件如下：
+ https://facebook.github.io/react-native/docs/getting-started.html#content
+
+
+###二、如何正确运行UI组件Example
+ 我们可以到react-native的github项目地址找到example,地址是https://github.com/facebook/react-native/tree/master/Examples/UIExplorer。下载react-native的代码库，将UIExplorer目录下的所有文件拷贝到你新建的项目中。其实UIExplorerApp.js就是整个项目的启动的文件。有两种方式可以启动项目：
+
+ 1、第一种是修改jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
+
+ 2、第二种就是将UIExplorerApp.js里面的代码复制到index.ios.js中，此时，注意：
+ AppRegistry.registerComponent('HelloWorld', () => UIExplorerApp);
+ HelloWorld是你的项目名称，如果已经启动项目，需要确保这个名称一致。
+
+ 项目启动后的界面如下，你就可改改UI组件看效果了。
+
+
+###三、活动指示器组件
+ 其实，每个组件如何使用，可以到demo中去看代码。这里做简单的介绍.活动指示器组件可以做loading,下拉刷新等
+
+
+###四、日历组件
+
+
+###五、图片组件
+
+
+
+###六、列表组件
+
+
+###七、导航器组件
+
+
+
+###八、导航组件
+
+
+
+###九、开关组件
+
+
+ 其余组件可以查看demo运行和学习，其实就是相当于html标签，具有某种功能，习惯就好。
+
diff --git a/react_native/第5篇ui组件.html b/react_native/第5篇ui组件.html
new file mode 100644
index 0000000..5495162
--- /dev/null
+++ b/react_native/第5篇ui组件.html
@@ -0,0 +1,220 @@
+
+
+
+
+
+
+React-Native入门指南
+
+
+
+React-Native入门指南
+
+第5篇UI组件
+
+一、目前React-Native支持的组件
+
+在facebook React-native的官网可以看到目前支持的组件如下：
+https://facebook.github.io/react-native/docs/getting-started.html#content
+
+
+
+
+二、如何正确运行UI组件Example
+
+我们可以到react-native的github项目地址找到example,地址是https://github.com/facebook/react-native/tree/master/Examples/UIExplorer。下载react-native的代码库，将UIExplorer目录下的所有文件拷贝到你新建的项目中。其实UIExplorerApp.js就是整个项目的启动的文件。有两种方式可以启动项目：
+
+1、第一种是修改jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
+
+2、第二种就是将UIExplorerApp.js里面的代码复制到index.ios.js中，此时，注意：
+AppRegistry.registerComponent('HelloWorld', () => UIExplorerApp);
+HelloWorld是你的项目名称，如果已经启动项目，需要确保这个名称一致。
+
+项目启动后的界面如下，你就可改改UI组件看效果了。
+
+
+
+
+三、活动指示器组件
+
+其实，每个组件如何使用，可以到demo中去看代码。这里做简单的介绍.活动指示器组件可以做loading,下拉刷新等
+
+
+
+
+四、日历组件
+
+
+
+五、图片组件
+
+
+
+六、列表组件
+
+
+
+七、导航器组件
+
+
+
+八、导航组件
+
+
+
+九、开关组件
+
+
+
+其余组件可以查看demo运行和学习，其实就是相当于html标签，具有某种功能，习惯就好。
+
+
+
\ No newline at end of file