React Native组件(一)组件的生命周期

1-XcGM-8E_hGl4fpAr9wJIsA_副本.png
相关文章
React Native探索系列

前言

React Native有很多组件比如Image、ListView等等,想要合理的使用组件,首先要先了解组件的生命周期。

查看更多

分享到 评论

Android内存优化(二)DVM和ART的GC日志分析

arthero_副本.png
相关文章
Android性能优化系列
Java虚拟机系列

前言

Java虚拟机(三)垃圾标记算法与Java对象的生命周期这篇文章中,提到了Java虚拟机的GC日志。DVM和ART的GC日志与Java虚拟机的日志有较大的区别,这篇文章就对DVM和ART的GC日志进行分析。

查看更多

分享到 评论

Android深入理解Context(二)Activity和Service的Context创建过程

2af0199d294e1d5094e6_副本.jpg

相关文章
Android深入理解四大组件系列
Android深入理解Context系列

前言

上一篇文章我们学习了Context关联类和Application Context的创建过程,这一篇我们接着来学习Activity和Service的Context创建过程。需要注意的是,本篇的知识点会和深入理解四大组件系列的部分文章的知识点相重合。

查看更多

分享到 评论

React Native探索(五)使用fetch进行网络请求

fetch-api-1050x360_副本_副本.jpg
相关文章
React Native探索系列

前言

React Native可以使用多种方式来进行网络请求,比如fetch、XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLHttpRequest的产物,这一节我们就来学习fetch的基本用法。

查看更多

分享到 评论

Android内存优化(一)DVM和ART原理初探

1-ClSMKlNwdXNTaLbRpHTqtg_副本.jpg
相关文章
Android性能优化系列
Java虚拟机系列

前言

要学习Android的内存优化,首先要了解Java虚拟机,此前我用了多篇文章来介绍Java虚拟机的知识,就是为了这个系列做铺垫。在Android开发中我们接触的是与Java虚拟机类似的Dalvik虚拟机和ART虚拟机,这一篇我们就来了解它们的基本原理。

查看更多

分享到 评论

Android深入理解Context(一)Context关联类和Application Context创建过程

相关文章
Android深入四大组件系列

前言

Context也就是上下文对象,是Android较为常用的类,但是对于Context,很多人都停留在会用的阶段,这个系列会带大家从源码角度来分析Context,从而更加深入的理解它。

查看更多

分享到 评论

React Native探索(四)Flexbox布局详解

5e634bec-0eac-42de-9f5a-28813cf0ff28_副本.png

相关文章
React Native探索系列

前言

在Android开发中我们有很多种布局,比如LinearLayout和RelativeLayout,同样在React Native也有它的布局,这个布局就是Flexbox布局。在CSS、React Native和Android等都有它的身影。这一篇文章,我们就通过各种小例子来掌握React Native中的Flexbox布局。

查看更多

分享到 评论

Java虚拟机(四)垃圾收集算法

相关文章
Java虚拟机系列

前言

在本系列上一篇文章中我讲到了垃圾标记算法,垃圾被标记后,GC就会对垃圾进行收集,垃圾收集有很多种算法,这篇文章就来介绍常用的垃圾收集算法的思想。

查看更多

分享到 评论

Android深入四大组件(五)Content Provider的启动过程

content-providers_副本.jpg
相关文章
Android深入理解四大组件系列

前言

Content Provider做为四大组件之一,通常情况下并没有其他的组件使用频繁,但这不能作为我们不去深入学习它的理由。关于Content Provider一篇文章是写不完的,这一篇文章先来介绍它的启动过程。

查看更多

分享到 评论

React Native探索(三)组件的Props(属性)和State(状态)

相关文章
React Native探索系列

前言

在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。

1.Props(属性)

组件创建时会设置一些参数来定制这个组件,这些参数就是属性,属性一旦设定,在组件的生命周期中就不会改变。下面拿Image的source属性和Text的onPress属性作为举例。

Image的source属性

import React, {Component} from 'react';
import {AppRegistry, Image} from 'react-native';
class ImageSourceApp extends Component {
    render() {
        let pic = {
            uri: 'http://olwwjaqhc.bkt.clouddn.com/gongzhong.jpg'
        };
        return (
            <Image source={pic} style={{width: 200, height: 200}}/>//1
        );
    }
}
AppRegistry.registerComponent('firstProject', () => ImageSourceApp);

在注释1处用Image的source属性来指定要显示的图片的地址,{}中可以放一个js变量或表达式,需要执行后取值,这里将图片的地址pic放到{}中。紧接着用style属性来设置图片大小,关于style属性,后面会介绍它。运行效果如下图所示。

QQ图片20170516205221.jpg

Text的onPress属性

接着拿我们熟悉的Text来做举例,如下所示。

import React, {Component} from 'react';
import {AppRegistry, Text, Alert} from 'react-native';
class TextPressApp extends Component {
    render() {
        return (
            <Text onPress={onTextPress}>点击文本</Text>//1
        );
    }
}
const onTextPress = () => {
    Alert.alert('弹出框');
};
AppRegistry.registerComponent('firstProject', () =>  TextPressApp);

注释1处的onPress就是Text的属性,除了onPress,Text还有很多其他的属性,比如numberOfLines、onLayout和style等等。{}放入了onTextPress函数,它是一个箭头函数,作用就是return一个Alert,它等价于如下代码:

function onTextPress() {
    return Alert.alert('弹出框');
};

好了我们运行程序,当我们点击Text组件时会弹出Alert,如下图所示。
QQ图片20170515130019_副本.jpg

style属性

在React Native中所有的核心组件都接受名为style的属性,用来定于组件的样式,我们将上面的Text示例代码中加入style属性,如下所示。

...
class TextPressApp extends Component {
    render() {
        return (
            <Text style={{color: 'blue'}} onPress={onTextPress}>点击文本</Text>
        );
    }
}
...

再运行程序,就会发现”点击文本”变为蓝色了。在实际开发中,style属性会变得越来越复杂,因此我们可以使用StyleSheet.create来集中定义组件的样式。

import React, {Component} from 'react';
import {AppRegistry, Text, Alert, StyleSheet, View} from 'react-native';
class TextPressApp extends Component {
    render() {
        return (
            <View>//2
                <Text style={styles.largeblue} onPress={onTextPress}>点击文本</Text>
                <Text style={styles.green}> 第二行</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({//1
    largeblue: {
        color: 'blue',
        fontSize: 28,
        fontWeight: 'bold',
    },
    green: {
        color: 'green',
        fontSize: 18,
    },
});
const onTextPress = () => {
    Alert.alert('弹出框');
};
AppRegistry.registerComponent('firstProject', () => TextPressApp);

在注释1处通过StyleSheet.create创建了一个样式表,我们在Text中使用样式表就可以了。在注释2处用到了view组件,它是一个基础组件支持Flexbox布局、样式和一些触摸处理等,可以放到其他视图里也可以包含子视图。View组件在Android、iOS和Web中,分别对应View、UIView和<div>
我们运行程序,效果如下图所示。

QQ图片20170516155525.jpg

2.State(状态)

组件的属性设置完毕后,在组件的生命周期中就不会改变,如果想要改变属性,我们可以使用State,例子如下。

import React, {Component} from 'react';
import {AppRegistry, Text, View} from 'react-native';
class Flash extends Component {
    constructor(props) {//1
        super(props);
        this.state = {showText: true};//2
        setInterval(() => {
            this.setState({showText: !this.state.showText});
        }, 1000);//3
    }
    render() {
        let display = this.state.showText ? this.props.text : '';//4
        return (
            <Text style={{color: 'blue'}}>{display}</Text>
        );
    }
}
class FlashApp extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
                <Flash text='蓝色闪光'/>//5
            </View>
        );
    }
}
AppRegistry.registerComponent('firstProject', () => FlashApp);

我们自定义了Flash组件,在注释1处定义了constructor构造方法,注释2处做了初始化state的工作,默认showText的值为true。注释3处调用setInterval方法,每隔1000毫秒对showText的值进行取反,使得showText的值不断在true和false之间切换。注释4处通过showText的值来控制文本的显示,如果showText为true,则通过this.props.text来获取Flash组件的text属性的值。最后在注释5处使用我们自定义的Flash组件,将text作为Flash组件的属性并设值。运行效果如下所示。
QQ20170516_clip.gif

参考资料
React Native官方文档
React Native中文网

分享到 评论

Java虚拟机(三)垃圾标记算法与Java对象的生命周期

相关文章
Java虚拟机系列

前言

这一节我们来简单的介绍垃圾收集器,并学习垃圾标记的算法:引用计数算法和根搜索算法,为了更好的理解根搜索算法,会在文章的最后介绍Java对象在虚拟机中的生命周期。

查看更多

分享到 评论

Android深入四大组件(四)广播的注册、发送和接收过程

4-5broadcastreceiver-141001023810-phpapp02-thumbnail-4_副本.jpg
相关文章
Android深入理解四大组件系列

前言

我们接着来学习Android四大组件中的BroadcastReceiver,广播主要就是分为注册、接收和发送过程。建议阅读此文前请先阅读Android深入理解四大组件系列的文章,知识重复的部分,本文不再赘述。

查看更多

分享到 评论

React Native探索(二)Atom+Nuclide安装、配置和调试

og_image_副本_副本.png

相关文章
React Native探索系列

前言
上一篇文章我们搭建了开发环境,并写了个Hello World。这一节我们来学习React Native的开发IDE:Atom+Nuclide的安装、配置与调试。本文所讲的内容只适用于Mac平台。

查看更多

分享到 评论

Java虚拟机(二)对象的创建与OOP-Klass模型

相关文章
Java虚拟机系列

前言

在前一篇文章中我们学习了Java虚拟机的结构原理与运行时数据区域,那么我们大概知道了Java虚拟机的内存的概况,那么内存中的数据是如何创建和访问的呢?这篇文章会给你答案。

查看更多

分享到 评论

React Native探索(一)环境搭建与Hello World(Windows/Mac)

1.配置React Native

首先我们要先来安装一些软件,如下所示。
Chocolatey/Homebrew
Windows平台安装Chocolatey:
Chocolatey是一个Windows上的命令行包管理器,安装了Chocolatey就可以通过命令行来安装一些我们需要软件。我们打开cmd命令行程序使用如下命令即可。

powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient)
.DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

Mac平台安装Homebrew:
在Mac上则需要安装Homebrew,它和Chocolatey的作用是一样的,在终端输入如下命令即可。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

我的Mac系统版本是10.11.6,安装过程中会提示按下return键,这时按下return键会提示输入系统密码,输入密码后会显示安装成功。
Python 2
Windows平台安装Python 2:
安装完Chocolatey就可以在命令行程序使用Chocolatey来安装Python 2。

choco install python2

Mac系统中自带Python的执行环境,因此不需要安装Python 2。
当然我们也可以直接Python官网去下载安装,下载地址为https://www.python.org/downloads/。
这里我的Windows平台的Python版本为2.7.10。

Node.js
Windows平台安装Node.js:

choco install nodejs.install

Mac平台安装Node.js:

brew install node

同样的也可以去Node.js官网去下载安装,地址为https://nodejs.org/en/。
这里我的Windows平台的Node.js版本为7.8.0。Windows平台关掉cmd命令提示符窗口,打开Node.js command prompt(Node.js命令提示符窗口),输入如下语句来设置npm镜像以加速后面的过程,Mac平台在终端输入即可:

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native的命令行工具(react-native-cli)
接下来安装Yarn和react-native-cli,Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。react-native-cli则用于执行React Native的创建、初始化、更新项目、运行打包服务(packager)等任务。在Windows或者Mac平台输入如下语句来安装它们。

npm install -g yarn react-native-cli

安装完yarn后也要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

2.配置Android Studio

这里假设你是一个Android开发者并且已经安装了Android Studio,我们要确保SDK安装正确,打开Android Studio的SDK Manager,在SDK Platforms窗口中勾选Show Package Details,并确保已经安装了下图打勾的选项。

QQ截图20170501153507.png

接下来在SDK Tools窗口中勾选Show Package Details,在Android SDK Build Tools列表中勾选23.0.1,勾选最底部的Android Support Repository。

3.使用React Native创建并运行项目

接下来我们创建和运行项目,在Windows或者Mac平台的命令提示符窗口进入需要存储React Native项目的文件目录,输入如下语句来创建项目:

react-native init firstProject

这时会在存储文件中生成名为firstProject的项目文件,我们用Android Studio加载firstProject文件中android文件。
接下来运行SDK的模拟器,这里我的模拟器为Android 6.0版本的Nexus6。最后输入如下命令来将React Native项目运行到模拟器中:

cd firstProject
react-native run-android

这时模拟器运行效果如下图所示。

Screenshot_20170501-162519_副本.png

这时我们可以通过连续两次按下键盘的R键来刷新界面来查看你的最新修改。通过摇动手机(真机)或者按下menu键(CTRL+M/⌘+M)来进入React Native的开发者选项。
关于模拟器这里建议使用Genymotion,它所占用的内存要远小于SDK自带的模拟器。

4.Hello World

我们将index.android.js 文件的代码清空并加入如下代码。

import React, { Component } from 'react';//1
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {//2
  render() {
    return (
      <Text>Hello world</Text>//3
    );
  }
}
AppRegistry.registerComponent('firstProject', () => HelloWorldApp);//4

这段代码是ES6编写的,ES6是JavaScript语言的下一代标准。不了解的同学可以买一本阮一峰的《ES 6标准入门》,电子书地址为http://es6.ruanyifeng.com/。
在注释1处做了两件事,一是为react组件指定默认的输出,并命名为React,二是从react组件中导入Component 变量。
注释2处定义了HelloWorldApp 组件并继承自Component ,接着在render方法中return了注释3处的内容,这是一种在JavaScript中嵌入XML结构的语法,叫做JSX,JSX编写的内容会显示在界面中。注释4处用AppRegistry模块来告知React Native哪一个组件被注册为整个应用的根容器。
接着我们连续两次按下键盘的R键来刷新界面,这样”Hello world”就显示在界面中。

参考资料
搭建开发环境
React Native开发错误警告处理总结
React Native学习笔记2:Android环境搭建
《ES 6标准入门(第二版)》

分享到 评论

Android深入四大组件(三)Service的绑定过程

great-hotel-service_副本.jpg
相关文章
Android深入理解四大组件系列

前言

我们可以通过调用Context的startService来启动Service,也可以通过Context的bindService来绑定Service,建议阅读此篇文章前请阅读Android深入四大组件(二)Service的启动过程这篇文章,知识点重叠的部分,本篇文章将不再赘述。

查看更多

分享到 评论