react-native android实战：1 创建项目

发表于 2016-03-07 | 分类于 react-native android实战 |

新建工程

执行命令

1	react-native init MyProject

导入第三方库

导入Button库react-native-button，戳这里，打开github

1	npm install react-native-button --save

导入导航库react-native-router-flux，点击查看github

1	npm install react-native-router-flux --save

导入redux

1	npm install redux --save

导入react-redux

1	npm install react-redux --save

导入react-native-modalbox

1	npm install react-native-modalbox --save

react-native-modalbox如下图

导入react-native-vector-icons

react-native-vector-icons是github中很火的开源图标项目，解决我们找四处找图标的麻烦

注意在android使用中，一定不要忘记把node_modules\react-native-vector-icons\Fonts下的所有文件拷贝到android/app/src/main/assets/fonts路径

执行

打开服务

1	react-native start

android虚拟机或真机运行

1	react-native run-android

调试

5.0以下点击memu菜单或者摇晃机身，弹出选项，选择reload js

5.0以上首先adb reverse tcp:8081 tcp:8081，然后摇晃机身

参考文献

React-Native Android 初次踩坑之旅

在windows下搭建react-native-android开发环境

react-native-android实战：Bug集锦

发表于 2016-03-04 | 分类于 react-native android实战 |

android版本开发时遇到的Bug

记录我在react-native android平台开发过程遇到的bug

1 error:undefined is not an object (evaluating ‘screenPhysicalPixels.width’)

解决方案：

参考地址

android\app\build.gradle

修改

1	compile "com.facebook.react:react-native:0.19.+"

为

1	compile "com.facebook.react:react-native:0.20.+"

2 `Error while updating property 'navIcon' of a view managed by: ToolbarAndroid`

解决方案 1：

猜测是nacIcon没有package进apk,我在src文件，有nav_back@2x.png,nav_back@3x.png,我猜测就是这套机制出问题了，我现在尝试只保留nav_back.png,然后就没再报错，等有机会好好研究下打包机制

解决方案2：

turn
compile 'com.facebook.react:react-native:0.20.+'
to
compile 'com.facebook.react:react-native:0.21.+'

参考Error while updating property ‘navIcon’ of a view managed by: ToolbarAndroid #134

react-native基础：flexbox布局

发表于 2016-03-03 | 分类于 react-native basis |

推荐一篇阮一峰的blog，讲解Flex布局的基础语法
转一个讲的非常好的布局实战blog
再转一个非常好的讲布局基础知识的文章。
再转一个好文react-native 之布局篇

react-native基础：导航之react-native-router-flux

发表于 2016-03-03 | 分类于 react-native basis |

react-native-router-flux

所有的app设计，都会考虑导航的问题，android一般采用底部tabbar，但是最新的设计方案，更多的倾向于头部tabbar,或者头部scrollTabBar。本方案还是采用底部模式。

react-native-router-flux是推荐的解决方案，github地址。

如何使用

~~react-native-router-flux依赖于ExNavigator,所以首先要安装ex-navigator~~

新版本已经全部替换成react-native的Navigation api了。

安装ex-navigator

1	npm install @exponent/react-native-navigator --save

ExNavigator和Navigator之间的主要区别是可定制route。使用ExNavigator ，你可以定义每个scene的样子，其导航栏的内容应该是什么，当scene获得或失去焦点时自定义动作。

安装react-native-router-flux

1	npm i react-native-router-flux --save

安装react-native-button

github上关注度很高的button控件，命令行安装

1	npm install react-native-button --save

Feature 特点

集中定义你的screens(routers),以及他们的转场动画
使用简单的语法调用转场，比如Action.login
screens在转场时以前必须的navigator对象，取消了
使用schema定义一组screens的公共属性，例如：定义一个name为modal的schema,来表示从底部弹出的转场动画
show/hide 导航栏
支持使用tab bar ,使用 react-native-tabs
支持嵌套的navigators,比如，每个tab 都有自己的导航，转场动作将会自动的使用最上层的导航

New Features and Highlights

可嵌套的Navigator（e.g. Each tab can have its own navigator, nested in a root navigator）
自定义场景render for action sheet,native TabbarIOS.
Dynamic Routing :allows you 根据application state来选择要render哪个scene(see the Switch renderer, useful for authentication).
为navigation state带来你自定义的reduce，也就是说可以用reduce管理navigation state
Reset History Stack：reset模式能够clear历史栈，并清除navbar back button
更强大的State Control：支持在同一屏幕上具有不同的状态。例如，“查看我的帐户”可以允许对字段进行就地编辑，并且应出现“保存”，“取消”导航栏按钮。

Usage 用法

~~1 在index.js中，定义router，跟他的子节点route

如果你的部分screens有公共属性，请定义schema，来减少重复

2 在任何screen中

import {Actions} from ‘react-native-router-flux’
Actions.ACTION_NAME(PARAMS) 将被适当的调用，并将action跟params传递给route
~~

使用scene取代了route

import {Scene, Router} from 'react-native-router-flux';

class App extends React.Component {
  render() {
    return <Router>
      <Scene key="root">
        <Scene key="login" component={Login} title="Login"/>
        <Scene key="register" component={Register} title="Register"/>
        <Scene key="home" component={Home}/>
      </Scene>
    </Router>
  }
}

Actions.ACTION_NAME(PARAMS): 将调用相应的动作和参数传递给场景

Actions.pop(): pop出当前scene. It accepts following optional params:
- {popNum: [number]}：allows to pop multiple screens at once 一次弹出多个scene
- {refresh: {...propsToSetOnPreviousScene}}：allows to refresh the props of the scene that it pops back to

Actions.refresh(PARAMS): will update the properties of the current screen. 更新当前scene的属性

Configuration 配置

Router:

Property	Type	Default	Description
header	object	null	optional header view
footer	object	null	optional footer view (e.g. tab bar)
hideNavBar	bool	false	hides navigation bar for every route

Route:

Property	Type	Default	Description
name	string	required	必须是唯一的,将在screen转场时调用.比如a场景name=’ima’,在b场景要跳转到a，就在b场景onPress事件调用Action.ima(传参)，ps使用redux实现了统一管理state状态
component	React.Component	semi-required	要显示在screen的主角，也可以嵌套router
type	string	optional	定义新screen如何被添加到navigation栈。有以下`push`, `modal`,`actionSheet`,`replace`, `switch`, `reset`模式。默认是’push’。`replace` navigator用新route来replace 当前route. `actionSheet` 弹出 Action Sheet弹窗, 必须穿回掉函数做参数, 可以看一下demon学习. `modal` 在当前组件中，插入新组件. 用作在转场之前 (比如登录进程)弹出的提示框，屏蔽了下层的触摸操作。`switch` 跟tabbar的screen配合使用. `reset` 用法接近replace，除了他要从navigatior stack中卸载. `modal` 组件用Actions.dismiss()来取消
initial	bool	false	设置`true` 本screen 为初始页
title	string	null	在navigation bar中显示的标题
schema	string	optional	预先在schema定义的属性
wrapRouter	bool	false	If true, the route is automatically nested in its own Router. Useful for modal screens. For type==switch wrapRouter will be true 设置为true 本route为自动嵌套到自己的router里，对于modal scene是有用的。
sceneConfig	Navigator.SceneConfigs	optional	定义转场动画类型
defaultRoute	string	optional	定义要跳转到哪个route，当本route作为tab被选中并点击的时候
hideNavBar	bool	false	隐藏本route的navigation bar
hideTabBar	bool	false	隐藏本route的tabBar (当父router创建了tabbar并使用了, check Example)
navigationBarStyle	View style		继承自navigation bar 可选的style
titleStyle	Text style		optional style override for the title element
renderTitle	Closure		optional closure to render the title element
barButtonIconStyle	Image style		继承自icon button可选的style (e.g. back icon)
leftTitle	string		可选的，显示在left的文本（上一个roue没有提供`renderBackButton` prop时使用） `renderBackButton` > `leftTitle` > `previous route's title`
renderLeftButton	Closure		optional closure to render the left title / buttons element
renderBackButton	Closure		optional closure to render back text or button if this route happens to be the previous route
leftButtonStyle	View style		optional style override for the container of left title / buttons
leftButtonTextStyle	Text style		optional style override for the left title element
rightTitle	string		optional string to display on the right. `onRight` must be provided for this to appear.
renderRightButton	Closure		optional closure to render the right title / buttons element
rightButtonStyle	View style		optional style override for the container of right title / buttons
rightButtonTextStyle	Text style		optional style override for the right title element

Schema:

Property	Type	Default	Description
name	string	required	The name of the schema, to be referenced in the route as `schema={"name"}`
property	-	-	A `Schema` can have any property that you want the `Route` to inherit 可以定义任何你想在route里面定义的属性

Redux

react-native-router-flux已经实现了redex，因为state一改变，render就渲染，使用redux合并状态再渲染，减少渲染次数。

常见 segmentfault Redux 介绍

angularJs学习7：表单form

发表于 2016-03-02 | 分类于 angulasJs |

什么是表单，一般是form

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">恢复默认</button>
  </form>
  <p>form = {{user }}</p>
  <p>default = {{default}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.default = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.default);
    };
    $scope.reset();
});
</script>

</body>
</html>

angularJs学习6：指令

发表于 2016-03-02 | 分类于 angulasJs |

什么是指令？什么是模块？

添加一个自带的控制器


<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

添加一个自定义的指令

<div ng-app="myApp" runoob-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

注意

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。

在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。

angularJs学习5：操作html的Dom

发表于 2016-03-02 | 分类于 angulasJs |

实例一

<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}
</p>
</div> 

</body>
</html>

示例2 show指令 hide指令

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

<div ng-app="" ng-init="hour=11">

<p ng-show="hour > 12">我是可见的。</p>

angularJs学习4：http请求

发表于 2016-03-02 | 分类于 angulasJs |

如何通过http从网络获取数据

1 读取json文件

AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。

以下是get请求

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
  .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

以下是post请求

<script>
        function formController($scope, $http) {
            $scope.commit = function() {
                $http({
                    method:"POST",
                    url:"/liberty_oa_2015_4_21/login/login.do", 
                    params:{
                        "userName":$scope.current.name,
                        "password":$scope.current.pass
                    }
                }).success(function(data) {
                    console.log("success...");
                }).error(function() {
                    alert("fail...");
                });
             
            };
        };
    </script>

表格显示

普通显示

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

2.带序号的显示

<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

angularJs学习3:控制器，过滤器

发表于 2016-03-02 | 分类于 angulasJs |

控制器 ng-controller

指令定义了应用程序控制器

可以在html直接写，也可以单出写在.js文件

写在html的模式

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

写在.js的模式

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

2过滤器

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

2.2如何添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.
(（下面的两个实例，我们将使用前面章节中提到的 person 控制器）)
uppercase 过滤器将字符串格式化为大写：
如

1	<p>姓名为 {{ lastName \| uppercase }}</p>

angularJs学习2：scope作用域

发表于 2016-03-02 | 分类于 angulasJs |

scope

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

代码示例

<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>

</body>
</html>

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
我自己的理解是：
scope就是类似dom的树，根据id取不同的对象，只不过是比dom效率高了，因为是
直接获得，比如 input ng-model=”text1”,可以直接通过$.scope.text1赋值

根作用域 $rootScope

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1>姓氏为 {{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

<p>注意 $rootScope 在循环对象内外都可以访问。</p>

</body>
</html>

新建工程

导入第三方库

执行

推荐的IDE

推荐模拟器

调试

参考文献

android版本开发时遇到的Bug

1 error:undefined is not an object (evaluating ‘screenPhysicalPixels.width’)

2 Error while updating property 'navIcon' of a view managed by: ToolbarAndroid

react-native-router-flux

如何使用

安装ex-navigator

安装react-native-router-flux

安装react-native-button

Feature 特点

New Features and Highlights

Usage 用法

Configuration 配置

Router:

Route:

Schema:

Redux

添加一个自带的控制器

添加一个自定义的指令

实例一

示例2 show指令 hide指令

如何通过http从网络获取数据

1 读取json文件

表格显示

控制器 ng-controller

2过滤器

2.2如何添加过滤器

scope

代码示例

AngularJS 应用组成如下：

根作用域 $rootScope

2 `Error while updating property 'navIcon' of a view managed by: ToolbarAndroid`