开发者社区> developerguy> 正文

第一次react-native项目实践要点总结 good

简介: 今天完成了我的第一个react-native项目的封包,当然其间各种环境各种坑,同时,成就感也是满满的。这里总结一下使用react-native的一些入门级重要点(不涉及环境)。注意:阅读需要语法基础: ES6 、react 、JSX 我对react-native的理解简而言之就是 :react的...
+关注继续查看

今天完成了我的第一个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 "../.."
  1. 后缀名自动获取(文件会获取拥有与之相应后缀名的文件)

    在组件模块的导入过程中,如果这个模块是分设备的,也就有俩个文件:xxx.android.js和xxx.ios.js,这些后缀(android和ios)是不需要的,在不同的设备环境中,它自动获取相应后缀名的文件,即ios包会自动获取xxx.ios,android包会自动获取xxx.android。

  2. 后缀名自动忽略(文件会自动忽略拥有与之不相应后缀名的文件)

    一个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

  1. props(属性)

    当我们调用这些组件时,我们如果为每一个组件传递了不同的属性,这个属性就是props。比如下例中,我们调用了HelloWorldApp组件,并为其设置了一个date属性,则我们可以在HelloWorldApp的组件里,通过this.props.date来获取这一属性值。

    <HelloWorldApp date = {2016}>

请注意{pic}外围有一层括号,我们需要用括号来把pic这个变量嵌入到JSX语句中。括号的意思是括号内部为一个js变量或表达式,需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。

  1. state(状态)

    state需要在constructor中初始化,然后通过调用setState方法修改。
    通过上面的组件生命周期图,我们可以看出,state是一个状态机,state的改变会引起shouldcomponentupdate、componentwillupdate、rendner...一系列方法的执行,视图会重新渲染
    所以,如果需要动态地改变组件的数据或试图,请操作state。

react组件之间的通信

    1. 子组件接收父组件的改变信号

      简单:当父组件改变时,直接向子组件传递props

    2. 父组件接收子组件的改变信号
      在父组件中定义一个方法,并通过props传递给子组件,子组件改变时,通过调用这个父组件传递过来的方法,从而实现在父组件中执行该方法。

    3. 非父子关系组件之间的通信

      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"即可

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
服务器性能配置要点总结
(1).操作系统 当前主流的服务器操作系统则主要分为:Windows server、UNIX、Linux、NetWare这四大阵容。不同的系统有不同的特点,要根据情况来判断Windows server是用户群体最大的服务器系统,不得不多做介绍。
1194 0
TypeScript在react项目中的实践
前段时间有写过一个TypeScript在node项目中的实践。 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的。 但是那仅仅是一个纯接口项目,碰巧赶上近期的另一个项目重构也由我来主持,经过上次的实践以后,尝到了TS所带来的甜头,毫不犹豫的选择用TS+React来重构这个项目。
2023 0
在GitHub上删除项目后,在Android Studio上传项目依然提示project is already on github
描述: 在GitHub上面上传项目,但是感觉有些问题,就想删除了重新上传。 但是在Android Studio重新上传项目时,遇到了问题,一直提示“project is already on github”   解决方案: 1、关闭Android Studio项目;   2、进入到本地项目目录,找到隐藏文件夹.
1280 0
Spring-boot项目整合Activemq实现订阅发布模式
Apache ActiveMQ是Apache软件基金会所研发的开放源代码消息中间件;由于ActiveMQ是一个纯Java程序,因此只需要操作系统支持Java虚拟机,ActiveMQ便可执行。
1073 0
第一次戒烟失败总结 - 光靠毅力是莽夫
第一次戒烟失败总结 - 光知道挺住不抽是不行的 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
1126 0
Java总结 - List实现类Vector&Stack
由于之前 对ArrayList和LinkedList的分析,所以在看Vector和Stack的源码实现就会非常简单 观察上图,我们可以看到本文要说的Stack和Vector是父子关系,我们依旧从源码入手,期望能够对你有帮助,如果本文有理解不对的地方,请及时指正,谢谢您 Vector 我们知道...
1553 0
第一次react-native项目实践要点总结 good
今天完成了我的第一个react-native项目的封包,当然其间各种环境各种坑,同时,成就感也是满满的。这里总结一下使用react-native的一些入门级重要点(不涉及环境)。注意:阅读需要语法基础: ES6 、react 、JSX 我对react-native的理解简而言之就是 :react的...
1139 0
Visual Studio 2010 实用功能总结
Visual Studio 2010 实用功能总结   Visual Studio 2010 已经发布1个多月了,个人感觉在使用过程中有些新功能确实方便了很多。在此分享一些比较实用的功能,也算是抛砖引玉欢迎大家来补充其他自己常用的功能特性。
757 0
+关注
developerguy
A code cleanliness code farmers, A programmer concentrate on elegant design, A want to do with the product architect
1663
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载