React Native 学习笔记(一)

前端之家收集整理的这篇文章主要介绍了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);
};

#

实用导航器@R_9_404@面
[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相关文章