ReactNative中state使用

ReactNative官网中是这样描述的:props和state都是用来控制组件的数据的。props是在父组件中指定的,而且一经指定,在被指定的组件的生命周期中则不再改变。对于需要改变的数据,我们需要使用state。 每次调用setState时,组件都会重新执行render方法重新渲染。 注意事项: 一切界面变化都是状态state变化 state的修改必须通过setState()方法 this.state.likes = 100; // 这样的直接赋值修改无效! setState 是一个 merge 合并操作,只修改指定属性,不影响其他属性 setState 是异步操作,修改不会马上生效 import React, { Component } from ‘react’; import{Text}from ‘react-native’; export default class StateTest extends Componment{ constructor(props){ super(props); this.state={ name:’小明’ } } render(){ return (<View> <Text>{this.state.name}</text> <Button onpress={()=>{ this.setState({ name:小明 }) }} title=”reset” /> </view>) } }

ReactNative中Props

一、什么是props props是属性,用来描述组件的特征,是由父组件传递给子组件的。 二、如何使用props Mine.js是父组件,传递name给子组件 import React, { Component } from ‘react’; import{View}from ‘react-native’; import MineView from ‘./MineView’; export default class Mine extends Componment{ render(){ return (<View> <MineView name = “我的” /> </View>) } } MineView.js是子组件 import React, { Component } from ‘react’; import{Text}from ‘react-native’; export default class MineView extends Componment{ render(){ return (<Text>Hello,{this.props.name}</Text>) } }…

ReactNative中ref使用详解

一、什么是ref ref是组件的一种特殊属性,可以理解为组件被渲染后指向组件的一个引用,我们可以通过ref来获取真实的组件。因为组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,我们称之为虚拟的DOM,只有当它真正的插入文档之后,才变为真正的DOM节点。根据React的设计,所有的DOM变动都发生在虚拟DOM上,然后再将实际的部分反映到真实的DOM上,这就是DOM DIFF,它可以提高页面性能。 二、如何使用ref <WebView style={{ width: width, height: height }} source = {{uri: this.state.url}} ref={(webView) => {this.webView = webView}} // domStorageEnabled={false} onMessage={this.onMessage.bind(this)} injectedJavaScript={this.getInjectedJS()} onError={this.onError} renderError={this.renderError} onNavigationStateChange={this.onNavigationStateChange.bind(this)} /> updataJS = ()=>{ const token = this.state.token; const insertToken = ` window.token = ‘${token}’; //调用webView的js注入方法 ` this.webView.injectJavaScript(insertToken); } 只要是webView有的方法都可以通过this.webiVew调用。例如this.webView.reload();

ReactNative中事件监听DeviceEventEmitter

最近做的RN项目需要登录成功之后返回到我的页面更新我的页面登录状态,这是用到了DeviceEventEmitter组件,它可以用来发送和接收事件,从而实现页面直接的通信。 一、代码实现 首先我们需要在我的页面Mine.js和登录页面Login.js导入DeviceEventEmitter组件import {DeviceEventEmitter} from ‘react-native’; 1.设置监听 在我的页面componentDidMount()中注册监听,componentWillUnmount()中移除监听。 UNSAFE_componentDidMount(){ this.subscription = DeviceEventEmitter.addListener(‘loginEvent’,(dict)=>{ //接收登录页面发送的通知 this.setState({ isLogin: dict.isLogin, phone:dict.phone }); }); } componentWillUnmount(){ DeviceEventEmitter.removeListener(this.subscription); } 2.触发监听 在登录页面发送事件,并传参。 DeviceEventEmitter.emit(‘loginEvent’, {isLogin:true,phone:this.state.phone}); 二、 DeviceEventEmitter 相关API 1.addListener 发起监听 语法 addListener( eventType: string, listener: (…args: any[]) => any, context?: any) 2.emit事件触发 语法 emit(eventType: string, …params?: any[]): void; 3.removeSubscription移除特定监听 这个使用就相当于remove()的使用 语法 removeSubscription(subscription: EmitterSubscription)…

ReactNative进度条ProgressView

ReactNative中嵌入的ProgressViewIOS已经废弃掉了,不过我试了一下,还是可以使用的。不过我们还是按照官方文档说的使用@react-native-community/progress-view来实现进度条功能吧。 首先我们需要安装yarn add react-native-community/progress-view 常用方法属性 progress 当前的进度值(0到1之间)。 progressImage 可拉伸图像显示为进度条。 trackImage 在进度条后面显示的可拉伸图像。 progressTintColor 进度条本身的颜色。 trackTintColor 进度条轨道的色调颜色。 progressViewStyle 进度条的样式。类型是个枚举(’default’,’bar’) import React, { Component } from ‘react’; import { View,Dimensions } from ‘react-native’; import { WebView } from ‘react-native-webview’; import ProgressView from ‘@react-native-community/progress-view’; // Dimensions 用于获取设备宽、高、分辨率 const { width, height } = Dimensions.get(“window”); export default MyWeb extends Component…

ReactNative中react-native-webview与H5交互

如今在App开发中,嵌入html进行混合开发已经是常见的功能了,在开发中,我们可以直接渲染html字符串或者加载本地的html文件或者是通过URL渲染远程html页面。 早先 WebView 是在 React Native 核心包中,后来为了减小 React Native 核心包的体积,便将其单独提出到react-native-webview 组件中。 webView的基本属性方法介绍 主要属性方法: source:在 WebView 中载入一段静态的 html 代码或是传入一个 url(还可以附带一些 header 选项) automaticallyAdjustContentInsets:控制插入到导航栏,标签栏或工具条之后的web内容是否自适应。格式:bool。默认值为true contentInset:webview插入到滑动视图时距离边缘的距离。交替为{top: 0, left: 0, bottom: 0, right: 0}。 injectJavaScript:在网页加载完成之后,还可以主动调用此方法(以ref形式调用)继续给WebView注入JS代码。注入后会立即执行。 injectedJavaScript:设置js字符串,在网页加载之前注入的一段JS代码。 startInLoadingState:是否开启页面加载的状态,其值为 true 或者 false。 bounces(仅iOS):布尔值,控制当webview内容到达底部时是否进行回弹。 scalesPageToFit(仅iOS):用于设置网页是否缩放自适应到整个屏幕视图,以及用户是否可以改变缩放页面。 scrollEnabled(仅iOS):用于设置是否开启页面滚动。 domStorageEnabled(仅Android):用于控制是否开启 DOM Storage(存储)。 javaScriptEnabled(仅Android):是否开启 JavaScript,在 iOS 中的 WebView 是默认开启的。 onNavigationStateChange:当导航状态发生变化的时候调用。 onLoadStart:当WebView刚开始加载时调用的函数。 onError:当网页加载失败的时候调用。 onLoad:当WebView加载成功后执行的函数。 onLoadEnd:当网页加载结束调用,无论是成功还是失败。 renderLoading:WebView组件正在渲染页面时触发的函数,只有 startInLoadingState…

ReactNative-SectionList基本使用

ReactNative中是这样介绍SectionList的: 高性能的分组(section)列表组件,支持下面这些常用的功能: 完全跨平台。 行组件显示或隐藏时可配置回调事件。 支持单独的头部组件。 支持单独的尾部组件。 支持自定义行间分隔线。 支持分组的头部组件。 支持分组的分隔线。 支持多种数据源结构 支持下拉刷新。 支持上拉加载。 import React, { Component } from ‘react’; import{ View, Text, Image, SectionList, Linking, StyleSheet, }from ‘react-native’; export default class RepairShops extends Component{ constructor(props){ super(props); this.state={ dataList:[ {title: ‘ ‘, data: [{title:’北京市朝阳区维修中心’,telPhone:’010-82656682′,address:’北京市朝阳区建国路88号大望路SOHO现代城C座7层709室’}]}, {title: ‘ ‘, data: [{title:’北京市海淀区维修中心’,telPhone:’010-82657928′,address:’北京市海淀区中关村南大街天作国际B座1903室’}]}, ] } } callPhoneClick(phoneNum){ let telPhone =…

AsyncStorage 简单封装

AsyncStorage是一个简单的、异步的、持久化的 Key-Value 存储系统,它对于 App 来说是全局性的。可用来代替 LocalStorage。 ReactNative官网推荐我们在 AsyncStorage 的基础上做一层抽象封装,而不是直接使用AsyncStorage。 注意:Deprecated. Use @react-native-community/async-storage instead. 安装方式: yarn add @react-native-community/async-storage async-storage官网https://react-native-community.github.io/async-storage/docs/usage 可以用来存储string和object数据。 //导入async-storage库 import AsyncStorage from ‘@react-native-community/async-storage’; export default class DeviceStorage{ static saveData = async (key, value) => { try { await AsyncStorage.setItem(key, value) } catch (e) { console.log(‘error’,e) } } static getData = async (key) => {…

iOS-WKWebView实现图文混排展示和点击图片查看大图

最近我们的项目新增加了车友会资讯文章需求,由于后台返回的文章内容是html标签,由于返回的内容只是body体里的内容,我这边做了对html做了整合,使的文章是一个完整的页面格式。这样我们就可以使用WKWebView实现图文混排的展示效果了。 NSString *htmlContentStr = [NSString stringWithFormat:@”<!DOCTYPE html>\n” “<html lang=\”en\”> \n” “<head> \n” “<meta name=\”viewport\” content=\”width=device-width, initial-scale=1 user-scalable=no\” /> \n” “<meta charset=\”utf-8\”>” “<script src=\”https://static.91mika.com/app-static/mt-common.js\”></script>” “<style type=\”text/css\”> \n” “img {width:%fpx !important;height:auto}” “p{color: #333333;font-size: 15px;}” “</style> \n” “</head> \n” “<h4>%@</h4>\n” “<body>” “%@” “<script type=’text/javascript’>” “var imgs = document.getElementsByTagName(‘img’);” “for(var i=0; i<=imgs.length; i++){\n” “imgs[i].onclick = function () {\n” “imgClick(this.src);\n”…

App耗电量优化

1.获取手机电量信息 通过Instruments获取 利用Xcode自带的Energy Log获取iPhone特定时段的电量消耗信息。具体步骤:打开Developer选项中的Start Logging —> 断开iphone与PC连接 —> 一系列的用户操作 —> Stop Logging —> 连接iphone与PC, 将电量消耗数据导入Instruments。 通过UIDevice获取 UIDevice提供了当前ios设备的详细信息,如name, systemVersion, localizedModel, batteryLevel等。 UIDevice.currentDevice.batteryMonitoringEnabled = true let batteryLevel = UIDevice.currentDevice().batteryLevel UIDevice.currentDevice.batteryMonitoringEnabled = false 在IOS 8.0之前,UIDevice中的batteryLevel只能精确到5%,而在IOS 8.0之后,开始支持1%的精确度。 通过IOKit.framework来获取 IOKit.framework在iOS中用来跟硬件或内核服务通信,常用于获取硬件详细信息,比如电池电量等。 2.耗电分析 ​ 手机中有哪些耗电场景: ​ (1)手机屏幕。手机中最耗电的模块肯定就是屏幕了,亮屏时间越长,电量消耗越快。 ​ (2)CPU相关。每次您的应用更新(或“绘制”)内容到屏幕时,都要求CPU,GPU和屏幕处于活动状态。多余或效率低下的绘图可能会将系统资源从低功耗状态中拉出或阻止它们完全掉电,从而导致大量能源消耗。例如:大量使用动画、过多使用计时器、屏幕上的绘图过多、大量使用视图不透明度等。 ​ (3)网络相关。一般情况下,网络相关(网络请求、数据传输、网络切换等)是仅次于屏幕的耗电大户。 ​ (4)GPS定位。GPS定位涉及GPS位置传感器,也是耗电大户,平时不使用GPS的时候记得关掉。 ​ (5)Camera。Camera涉及前后摄像头硬件,如果一直使用(录屏等),耗电也会非常可观。 3.电量优化 网络相关优化 发起网络请求时机,业务区分当前网络请求是需要及时返回结果的(用户主动下拉刷新等),还是可以延迟执行的(异步上传数据等),可以延迟执行的有针对性地把请求行为绑定在一起发出。 减少一个页面的接口数量,尽量合并成一个接口返回数据。 数据处理 压缩资料,在发送或接受数据之前,使用压缩算法尽可能地压缩数据。 缓存数据,使用缓存将不经常更新的数据存储在本地。仅当数据已更改或用户请求时才重新下载数据。…