第一次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"即可

 

相关文章
|
2月前
|
前端开发 JavaScript
深入理解并实践React Hooks —— useEffect与useState
深入理解并实践React Hooks —— useEffect与useState
129 1
|
2月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
120 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
21天前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
115 2
|
2月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
179 1
|
6天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
2月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
93 1
react项目配合diff实现文件对比差异功能
|
2月前
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
58 1
React项目input输入框输入自动失去焦点
|
2月前
|
JavaScript 前端开发 应用服务中间件
本地运行打包好的React、Vue项目
本文讨论了如何本地运行打包好的React和Vue项目,并解决了使用React-Router时Tomcat部署刷新页面导致404的问题,提出了将请求转回index.html的解决方案。
25 1
本地运行打包好的React、Vue项目
|
29天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
103 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)