第一次react-native项目实践要点总结
今天完成了我的第一个react-native项目的封包,当然其间各种环境各种坑,同时,成就感也是满满的。这里总结一下使用react-native的一些入门级重要点(不涉及环境)。注意:阅读需要语法基础: ES6 、react 、JSX
我对react-native的理解简而言之就是 :react的语法 + native的组件
组件的创建声明
class HelloWorldApp extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<Text>Hello world!</Text>
);
}
}
上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。当你在其他的组件中调用这个组件时,就会实例化这个“类”(即组件)。
注意:组件名需要大写
组件的导出、引用与注册
在ES6中,新增了import和export俩个关键字来导入导出模块。react-native的组件也是采用的这俩个关键字。
俩种方式:
第一种:
导出:
export default class HelloWorldApp extends Component{
render() {
return (
<Text>Hello world!</Text>
);
}
}
导入:
import HelloWorldApp from "../.."
第二种:
导出:
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
export {HelloWorldApp}
导入:
import { HelloWorldApp } from "../.."
后缀名自动获取(文件会获取拥有与之相应后缀名的文件)
在组件模块的导入过程中,如果这个模块是分设备的,也就有俩个文件:xxx.android.js和xxx.ios.js,这些后缀(android和ios)是不需要的,在不同的设备环境中,它自动获取相应后缀名的文件,即ios包会自动获取xxx.ios,android包会自动获取xxx.android。
后缀名自动忽略(文件会自动忽略拥有与之不相应后缀名的文件)
一个ios和android的公共模块文件,即共用代码模块文件,命名不能加ios和android后缀,否则,ios包取不到有androis后缀的文件,android取不到有ios后缀的文件。
实例解释上述:
现在有以下五个文件:
index.ios.js
index.android.js
say.android.js
say.ios.js
HelloWorldApp.android.js
我们想要分别在index.ios.js 和 index.android.js引入其他三个模块。我们只要在index.ios.js 和 index.android.js文件中如下写法就行:
//这里,index.ios.js会自动获取say.ios.js的模块;index.android.js会自动获取say.android.js的模块
import 模块名 from "./say";
//这里,HelloWorldApp.android.js 是一个公共模块,index.android.js能成功获取到./HelloWorldApp;但是index.ios.js则无法获取到HelloWorldApp模块,因为index.ios.js会忽略android后缀名的模块文件
import 模块名 from "./HelloWorldApp"
react组件的生命周期
项目中使用组件的时候,纠结于componentWillMount,componentDidMount...,直到看到这张图豁然开朗(so,图是盗的)。需要注意的是,这张图应该比较老了,其中的getDefaultProps和
getInitialState这俩个函数是ES5的写法了,ES6语法中,constructor方法中代替了getDefaultProps/getInitialState,我们可以在其内直接初始化props和state。
生命周期:
实例化(初始化)
constructor
设置默认的props->设置默认的state
componentWillMount
完成渲染之前执行,此时可以设置state
render
创建虚拟DOM,此时不能修改state
componentDidMount
真实的DOM渲染完毕,此时可以更改组件props及state
存在期:(这个时候的主要行为是状态的改变导致组件更新)
componentWillReceiveProps
组件接收到新的props,此时可以更改组件props及state
shouldComponentUpdate
操作组件是否应当渲染新的props或state,返回布尔值,首次渲染该方法不会被调用。
componentWillUpdate
接收到新的props或者state后,进行渲染之前调用,此时不允许更新props或state。
render
创建(更新)虚拟DOM
componentDidUpdate
组件真实的DOM更新完成
销毁期:
- componentWillUnmount
组件被移除之前,主要用于做一些清理工作,比如事件监听
- componentWillUnmount
react 的 props 和 state
props(属性)
当我们调用这些组件时,我们如果为每一个组件传递了不同的属性,这个属性就是props。比如下例中,我们调用了HelloWorldApp组件,并为其设置了一个date属性,则我们可以在HelloWorldApp的组件里,通过this.props.date来获取这一属性值。
<HelloWorldApp date = {2016}>
state(状态)
state需要在constructor中初始化,然后通过调用setState方法修改。
通过上面的组件生命周期图,我们可以看出,state是一个状态机,state的改变会引起shouldcomponentupdate、componentwillupdate、rendner...一系列方法的执行,视图会重新渲染。所以,如果需要动态地改变组件的数据或试图,请操作state。
react组件之间的通信
子组件接收父组件的改变信号
简单:当父组件改变时,直接向子组件传递props
父组件接收子组件的改变信号
在父组件中定义一个方法,并通过props传递给子组件,子组件改变时,通过调用这个父组件传递过来的方法,从而实现在父组件中执行该方法。非父子关系组件之间的通信
RCTDeviceEventEmitter
模块:它有俩个方法:emit和addListener,一个发送,一个接收。RCTDeviceEventEmitter.emit(notifName,param);
RCTDeviceEventEmitter.addListener(notifName,callback)
native 事件对象
在项目中,遇到一个控制scrollview组件滚动的需求,需要获取当前滚动的坐标,当时找了好久的文档,没找到解决方案,后来发现可以通过这样来传入一个事件对象
<ScrollView ref='scrollView' onScroll = {(e) => {this.scrollhShow(e);}}>
然后在函数中读取:
scrollhShow(e) {
console.log(e.nativeEvent)
}
当当当当,我要的滚动视图的坐标值就在里面了。
第一次react-native项目实践要点总结的更多相关文章
- 第一次react-native项目实践要点总结 good
今天完成了我的第一个react-native项目的封包,当然其间各种环境各种坑,同时,成就感也是满满的.这里总结一下使用react-native的一些入门级重要点(不涉及环境).注意:阅读需要语法基础 ...
- 技术实践丨React Native 项目 Web 端同构
摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...
- React Native 项目实战-Tamic
layout: post title: React Native 项目实战 date: 2016-10-18 15:02:29 +0800 comments: true categories: Rea ...
- React Native 项目运行在 Web 浏览器上面
React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...
- react native项目启动需要做的操作
一.启动: 1.查看端口(默认8081是否被占用) netstat -ano 可以查看所有的进程 2.netstat -ano | findstr "8081" 查看某个端口 ...
- React Native 项目整合 CodePush 全然指南
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...
- React Native项目集成iOS原生模块
今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...
- Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- 安装android Studio和运行react native项目(基础篇)
ANDROID_HOME环境变量 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径. 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设 ...
随机推荐
- 那些让IE6-8羞愧的替补型js
1,html5shiv 这个js特别简单,可以让IE8识别一些新的标签,常用的比如 header footor section,就能使用更好的语义的标签了. 引入方式: <!--[if lt I ...
- WPF MVVM下做发送短信小按钮
最近做一个项目,因为涉及到注册,因此需要发送短信,一般发送短信都有一个倒计时的小按钮,因此,就做了一个,在此做个记录. 一.发送消息 没有调用公司的短信平台,只是模拟前台生成一串数字,将此串数字输出一 ...
- es6学习笔记一数组(中)
接着上一篇,给大家再分享一些数组的其他方法.大家也可以去点击这里学习数组更多的方法 concat方法: 概述: concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回. ...
- Android studio每次启动卡在fetching Android sdk compoment information的解决方案
网上有人给出了方案:1)进入刚安装的Android Studio目录下的bin目录.找到idea.properties文件,用文本编辑器打开.2)在idea.properties文件末尾添加一行: d ...
- MongoDB学习系列(3)--解决MongoDB Unexpected Shutdown问题
晚上准备继续学习PHP+MongoDB,点击Run_MongoDB_Service.bat文件,这个文件是我写的bat文件,就是快速启动MongoDB.但是命令行一闪而过,我很奇怪.昨天晚上写代码还是 ...
- ORM开发之解析lambda实现完整查询(附测试例子)
上次讲解了怎么解析匿名对象(ORM开发之解析lambda实现group查询),这次来实现解析二元运算,完成基本条件语法 先看一个表达式 query.Where(b => b.Number == ...
- gravatar配置和使用【让你的网站使用全球通用头像】
前言 我们在很多博客或者网站留言,评论的时候会看到有的人头像很酷很个性化,但是这个博客和网站本身并没有提供设置头像的功能,感觉有点神奇,那么是怎么做到的呢?其实这是使用了Gravatar. Grava ...
- Lua 学习笔记(七)编译、执行外部代码块
Lua称为解释型语言的原因:Lua允许在运行源代码之前,先将源代码预编译为一种中间形式.区别解释型语言的主要特征是在于编译器是否是语言运行时库的一部分,即有能力执行动态生成的代码.因为Lua中有dof ...
- C# 将PDF文件转换为word格式
Pdf(Portable Document Format)意为“便携式文档格式”,是现在最流行的文件格式之一,它有很多优点如:尺寸较小.阅读方便.操作系统平台通用等,非常适合在网络上传播和使用.如今在 ...
- iOS编译FFmpeg、kxmovie实现视频播放 (转载)
由于FFmpeg开源框架的功能非常强大,可以播放的视频种类很多,同时添加第三方库kxmovie,实现视频播放,真的是爽爆了,因此今天来说一下关于FFmpeg在iOS手机上的一些配置过程,配置工具,还有 ...