React Native 学习笔记(一)

下面采用的是基于ES 6的写法,ES6之前没有extends class 这些关键字
1.安装包管理器 HomeBrew
sudo chown -R ‘whoami’ /usr/local
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

2.用 homebrew 安装nodejs (rn 需要nodejs4.0或以上的版本做环境)
brew install node

3.rn 命令行工具 react-native-cli(用于创建,初始化,更新,运行和打包项目等)
npm install -g react-native-cli

4.安装xcode(命令行,git..)

//推荐安装的工具
1.watchman (监视文件系统变更,快速刷新界面,提高开发性能)
brew install watchman

2.flow(flow 语法检查)
brew install flow

3.nuclide(facebook 提供的基于atom的编写rn的IDE)
推荐用webstorm 或 sublime text.

//运行 rn 自带示例
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios//也可以在xcode 中运行

//修改示例
编辑 index.ios.js 并在仿真器上command + r刷新

///真机测试/xcode 7 后不需要账号
AwesomeApp/ios/AwesomeApp/AppDelegate.m
中的localhost 修改为nodejs 服务器的ip地址———————-

真机运行app,会自动将javascript/图片打包到app内部

打开AwesomeApp/ios/AwesomeApp/AppDelegate.m
取消注释jsCodeLocation = [[NSBundle mainBundle]—————这一行。

notice: NSAllowsArbitraryLoads 安全http协议的权限————-

///////////// index.ios/android.js //////////////////////////////////////////
//引入RN内部模块
import React,{Component} from ‘react’;
import {AppRegistry,Text} from ‘react-native’;

//import,from,class,extends ()=>来自es6 语法,

class HelloWorldApp extends Component{
render(){
return (
Hello World
);
}
}

//定义并注册组件HelloWorldApp
AppRegistry.registerComponent(‘HelloWorldApp’,()=>HelloWorldApp);

RN 入门基础:

#

props 分为内部和外部属性
内部属性
{}中包含的是js变量或表达式

外部属性
//使用标签的时候可以直接在标签中加属性和值
this.props.pro1 这种方式可以在组件内部取属性值

组件为容器组件,用来布局

//组件可以相互组合成一个新的组件
return (




);

#

动态显示界面—状态
props一旦指定在组件生命周期中不会变化
state 用于需要改变的数据,用于变化的数据
来动态的刷新界面,需要在constructor中初始化

class Blink extends Component{
constructor(props){
//初始化值
this.state = {name:value}

//state 更像一个调控开关,控制UI的显示
 //改变状态值
 this.setState({name:newValue});

}

render(){
   let show = this.state.name //....

   return (<Text>{show}</Text>);
}

}//redux 统一管理数据流

#

样式:标签style 属性 javascript 样式驼峰写法

集中管理组件的样式

const styles = StyleSheet.create({
bigblue:{
color:’blue’,
fontWeight:’bold’,
fontSize:30
},

red:{color:’red’}

});

render(){

return (

xxxx
//数组中后申明的属性会覆盖先声明的同名属性


);
}

#

如何控制组件的尺寸
RN中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点
在不同尺寸的屏幕上显示一样的大小

flex 宽高
如果父容器width和height不确定,也没有设置flex则尺寸为0,里面
的子组件都无法显示

#

flexbox 布局
style属性可以设置
flexDirection,alignItems,justifyContent
////////////
React Native中的Flexbox的工作原理和
web上的CSS基本一致,当然也存在少许差异。
首先是默认值不同:flexDirection的默认值
是column而不是row,
alignItems的默认值是stretch而不是flex-start,
以及flex只能指定一个数字值。

#

用户输入(事件处理) 处理事件用闭包的方式

render(){
return(

#

ScrollView(适合显示数量不多的组件,所有组件都会渲染)

//这个有点小复杂
ListView(适合显示数量多的组件,可绑定数据源,元素可删除,渲染优化)

#

网络//居然用到了promise,这太好了
search(){
return fetch(‘www.abc.com/xxx.json’,{
method:’POST’,
headers:{
‘Accept’:’application/json’,
‘Content-Type’:’application/json’
},
//JSON.stringify()用于把别的对象转换为json 对象,object跟json不同
body:JSON.stringify({
firstParam:’yourValue’,
secondParam:’yourOtherValue’
})
})
.then((response) => response.json())//response.json()//返回json对象
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
}
//ES7 可以用async await来简化代码

async search(){
try{
let response = await fetch(xxxxxxxxx);//fetch 返回的是一个响应,响应携带返回的数据
let responseJson = await response.json();
}
catch(error){
console.error(error);
}
}

//其它方式XMLHTTPRequest,ajax…..也可以

//swift 中的in 和 => 还不一样

({() in

})
//大括号写在=>后面
(()=>{

})

支持WebSocket

var ws = new WebSocket(‘ws://xxx.com/abc);

ws.onopen = ()=>{
ws.send(“send a message”);
};

ws.onmessage = (m) => {
console.log(m.xxx);
};

ws.onerror = (e) =>{
console.error(e.message);
};

ws.onclose = (m) =>{
console.log(m.code,m.reason);
};

#

实用导航器跳转页面
[view stack]

在组件class 前面加export default 就可以让
此组件通过import Name from ./Name的方式在外部使用
还可以用类属性.defaultProps = {xxx:yyy}设置默认值

navigator.push({ //标题 + 索引
title:’Next Scene Title’,
index:1
});

navigator.pop();

//PropTypes.array
React.PropTypes.array 用于类型校验

#

常见的几个全局变量: this.props 用于管理视图属性(包括事件属性) this.state 用于管理视图状态 defaultProps 用于定义模式属性 StyleSheet 用于管理样式 PropTypes 用于数据校验 navigator 用于手机视图之间的导航 AppRegistry 用于注册一个组件

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...