第一次react-native项目实践要点总结 good
今天完成了我的第一个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。
Props(属性)
大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。
我们使用两种数据来控制一个组件:props和state。
props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。
对于需要改变的数据用state。
http://blog.csdn.net/jyt199011302/article/details/53927234
react 的 props 和 state
props(属性)
当我们调用这些组件时,我们如果为每一个组件传递了不同的属性,这个属性就是props。比如下例中,我们调用了HelloWorldApp组件,并为其设置了一个date属性,则我们可以在HelloWorldApp的组件里,通过this.props.date来获取这一属性值。
<HelloWorldApp date = {2016}>
请注意{pic}外围有一层括号,我们需要用括号来把pic这个变量嵌入到JSX语句中。括号的意思是括号内部为一个js变量或表达式,需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。
state(状态)
state需要在constructor中初始化,然后通过调用setState方法修改。
通过上面的组件生命周期图,我们可以看出,state是一个状态机,state的改变会引起shouldcomponentupdate、componentwillupdate、rendner...一系列方法的执行,视图会重新渲染。
所以,如果需要动态地改变组件的数据或试图,请操作state。
react组件之间的通信
子组件接收父组件的改变信号
简单:当父组件改变时,直接向子组件传递props
父组件接收子组件的改变信号
在父组件中定义一个方法,并通过props传递给子组件,子组件改变时,通过调用这个父组件传递过来的方法,从而实现在父组件中执行该方法。非父子关系组件之间的通信
RCTDeviceEventEmitter
模块:它有俩个方法:emit和addListener,一个发送,一个接收。RCTDeviceEventEmitter.emit(notifName,param);
RCTDeviceEventEmitter.addListener(notifName,callback)
http://www.cnblogs.com/yzg1/p/5985525.html
react-native run-android
会打开一个React Packager 窗口,
Running packager on port 8081. Keep this packager running while developing on any JS projects. Feel free to close this tab and run your own packager instance if you prefer.
模拟器中打开react native项目 更改js如果想reload,按ctrl + M 键,选“reload"即可
第一次react-native项目实践要点总结 good的更多相关文章
- 技术实践丨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的路径. 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设 ...
随机推荐
- Angular7环境搭建报错
昨天写的2019年Angular7——安装搭建路由方法不太正统,今天又去翻了下angular官网,跟着上面的环境搭建与部署走了一遍 从安装@angular/cli命令行工具开始 本篇主要记录下搭建过程 ...
- Vue.js组件的重要选项
Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...
- 34、uevent机制说明
class_device_create(4.3.2内核是device_create->device_create_vargs->device_register->device_add ...
- Fragment为载体可自己主动布局的CardView(GitHub上写开源项目初体验)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 前些天一直在看Android5.0 的Material Desgin,里面新增 ...
- [AngularJS NG-redux] Handle Asynchronous Operations with Middleware
Invariably the question that comes up when talking about Redux is how does one handle asynchronous o ...
- LUA凝视语法
server端代码已经完毕,client正在优化.游戏不久将上线,近期没事做,老大要我開始学习project Anarchy了.里面代码是比較偏爱的C++,包括lua,暂没学过lua.看了下LUA代码 ...
- Spring boot(三) springboot 定时任务
这个不多说,springboot 定时任务非常简单就可以实现了. 30s运行一次 , @Scheduled(cron="0,30 * * * * ?") 通过这个控制定时时间 cr ...
- 【u106】3D模型
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 一座城市建立在规则的n×m网格上,并且网格均由1×1正方形构成.在每个网格上都可以有一个建筑,建筑由若 ...
- JSON入门之二:org.json的基本用法 分类: C_OHTERS 2014-05-14 11:25 6001人阅读 评论(0) 收藏
java中用于解释json的主流工具有org.json.json-lib与gson,本文介绍org.json的应用. 官方文档: http://www.json.org/java/ http://de ...
- Windows 查看硬盘ID(diskpart命令)
使用diskpart命令Win+R键运行cmd,进入命令行界面:1.diskpart2.list disk 查看有几块硬盘3.select disk 0 选择第一块硬盘4.detail disk 显示 ...