react-native初见

_config.yml

@@ -90,6 +90,7 @@ baidusitemap:
 ## Docs: https://hexo.io/docs/deployment.html
 deploy:
   type: git
+  # repo: git@git.coding.net:sookie2010/sookie2010.coding.me.git
   repo: ssh://git@www.colorfulsweet.site:28280/git-repo/blog.git
   branch: master
 

source/_posts/react/react-native(1)-初见.md

@@ -0,0 +1,64 @@
+---
+title: react-native(1)-初见
+date: 2018-8-13 02:31:01
+tags: 
+  - react native
+categories: 
+  - react
+---
+`React Native`是Facebook开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架React在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台
+React Native 使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用
+因此对于web前端比较熟悉的可以快速上手
+同时相比于Hybrid混合开发模式, 并不完全脱离原生开发
+从而对于一些在混合模式当中难以解决的设备兼容问题、系统UI改造问题等等, 都可以借助原生开发来解决
+更加快速方便地去构建原生APP
+
+<!-- more -->
+### 环境搭建
+#### 安装react-native-cli
+这是一个构建react-native项目的脚手架工具
+确保正确安装nodejs之后
+可以全局安装这个脚手架工具
+```bash
+npm install -g react-native-cli
+```
+#### android-stdio
+由于react-native项目需要在安卓模拟器当中运行
+首先需要 [下载](http://www.android-studio.org/) 安装android-stdio
+
+##### 安装sdk
+如果没有安装sdk需要先安装
+![安装SDK](/images/react/android_sdk.png)
+##### 安装HAXM
+![安装HAXM](/images/react/HAXM_install.png)
+> 需要确保windows功能当中的Hyper-V没有开启
+![Hyper-V不能开启](/images/react/Hyper-V不能开启.png)
+
+##### 创建安卓模拟器
+![创建安卓模拟器](/images/react/Android_Virtual_Device.png)
+
+##### 启动安卓模拟器
+我们可以直接在android stdio里面运行这个刚才创建好的模拟器
+也可以在命令行运行
+在安装sdk的目录下, 会有一个emulator目录
+模拟器的运行程序就在这个目录当中
+定位到这个目录
+然后执行`emulator -list-avds`可以看到上一步当中创建好的安卓模拟器
+可以用`emulator -avd Nexus_6_API_24 -gpu off`来运行它
+![启动安卓模拟器](/images/react/启动安卓模拟器.png)
+成功运行
+![安卓模拟器](/images/react/安卓模拟器.png)
+> 比较推荐命令行运行的方式
+可以直观看到错误信息
+开始的时候缺少HAXM, 以及不能开启Hyper-V 都是从命令行提示信息看到的
+
+### Hello World
+首先用react-native-cli来初始化一个项目
+```bash
+react-native init AwesomeProject
+cd AwesomeProject
+# 在开启安卓模拟器之后, 可以运行这个项目
+react-native run-android
+```
+启动之后首先会在8081端口启动一个进程, 用于向模拟器当中同步代码
+![run-android](/images/react/run-android.png)

source/_posts/前端杂烩/替换元素.md

@@ -1,37 +0,0 @@
----
-title: 替换元素
-date: 2018-7-12 11:16:32
-tags: 
-  - 前端
-  - css
-categories: 
-  - 前端杂烩
----
-
-`替换元素`的含义是 **修改元素的某些属性值, 呈现的内容或样式就会被改变** 的元素
-`<img> <object> <video> <iframe>` 以及表单元素`<textarea> <input>`都是替换元素
-<!-- more -->
-
-替换元素具备以下特性
-1. **内容**的外观不受页面上CSS的影响
-比如`input[type=checkbox]`无法改变复选框的背景色, 内边距等
-2. 有自己的默认尺寸 ( video iframe canvas都是默认300*150 )
-3. 在很多CSS上有自己的一套表现规则
-
-### 尺寸计算规则
-+ 如果有CSS的尺寸指定, 则使用CSS指定的尺寸
-```css
-img { width:100px;height:120px; }
-```
-如果只指定了width, 那么高度就会按照固有尺寸计算得出
-比如原图尺寸50*80, 那么如果指定width为100px, 高度就会表现为160px
-只指定height同理
-+ 如果没有CSS尺寸, 那么就用HTML尺寸
-就是标签的属性
-```html
-<img src="test.jpg" width="100" height="120" />
-```
-+ 如果没有HTML尺寸, 就用固有尺寸
-对于图片来说, 就是这个图片的原始尺寸大小
-
-<!-- 未完成.... -->