文档章节

9. react-native-android之----reactjs基础

侯禹
 侯禹
发布于 2016/06/29 10:47
字数 1841
阅读 317
收藏 1

欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有:

http://my.oschina.net/MrHou/blog?catalog=3590216&temp=1466310573630

 

回顾前几期,我们做过了这么多实践,是时候回过头来看看我们写的JS文件了。学习react-native正像学习武术那样,我们已经学了很久的招式了,现在该回过头扎扎马步了。

 

1. 语法


    我们书写reactjs的时候,当然可以使用ES5的语法。

var reactNative = require('react-native');
var React = require('react');
var View = reactNative.View;
var Text = reactNative.Text;
var StyleSheet = reactNative.StyleSheet;
var AppRegistry = reactNative.AppRegistry;

var hellowReact = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Text>欢迎收看react-native-android系列教程</Text>
            </View>
        );  
    }   
});
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'flex-start',
        backgroundColor: '#fff',
    },
});

AppRegistry.registerComponent('hellowReact', () => hellowReact);

也可以使用ES6的语法,react中内置了packager帮我们进行转换。

    如果使用了es5的语法的话,我们可以看到,我们创建了一个『类』---hellowReact,确切的说,是一个组件。这个『类』必须要有一个render方法。这个render方法的返回值,指定了渲染在APP上的原生层。个人感觉这与android中的xml布局文件类似。

当然,我们也可以像之前一样,使用es6的语法进行描述。使用真正的类。

 

2. JSX


    不得不说,jsx真是一个神奇的设计。在js代码中,混入标签。当你习惯了这种语法之后,将会非常的喜欢它。

var hellowReact = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Text>欢迎收看react-native-android系列教程</Text>
            </View>
        );  
    }   
});

从上述代码我们可以看出,jsx中标签的形式与html类似,同样也是需要嵌套的标签层。同样需要闭合的标签。如果需要在JSX中混入js变量的话,则需要使用界符({)进行包裹。其中的js会被解析。JSX中的标签,由react-native基础库提供。当然,我们的标签也可以使用自己创建的组件。如下:

var Com = React.createClass({
    render() {
        return (
            <Text>欢迎收看react-native-android系列教程</Text>
        );  
    }   
});

var hellowReact = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Com />
            </View>
        );  
    }   
});

这里需要注意下,文字需要包裹在Text标签中。标签开头接受属性。每个标签的样式可以加载在自己的style属性中。另外还需注意,我们渲染的jsx,最外层只能有一个顶级的元素进行包裹。

 

3. 组件


    上面,我们已经说到了标签可以是自己创建的组件。我们也写了一个简单的组件。react中,书写自己的组件,可以将应用更加细化的拆分为多个模块。便于模块化的维护代码。自定义的组件在渲染时,可以传入一些属性,在组件内这些属性可以被获取,如图3.0.1:

var Com = React.createClass({
    render() {
        return (
            <Text>传过来的参数是:{this.props.param}</Text>
        );
    }
});

var hellowReact = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Com param={'我是传入的参数!'} />
            </View>
        );  
    }   
});

 

                                  图3.0.1

其实我们在JSX中插入的是一个类名,但是在渲染的时候,会生成一个类的实例。 这里提示一下大家,类的第一个字母需要大写,否则你会收到一个错误.....(如图3.0.2):

                                图3.0.2

 

4 状态与更新


    在网页开发中,我们的思维总是自己获取数据,自己去更改视图。但是reactjs给我们带来了完全不同的体验。reactjs认为,我们的程序是一个状态机。reactjs为我们提供了VM层,其实我们再回头来看看,我们在写render函数的返回值的时候,不就已经将我们的状态与视图融合在一起了吗?

var hellowReact = React.createClass({
    getInitialState: function () {
        return {
            name: 'hy'
        };
    },
    render: function () {
        return (
            <View style={styles.container}>
                <Text>当前的状态是:{this.state.name}</Text>
            </View>
        );  
    }   
});

上面的代码展示了,我们将当前组建的状态(this.state)混入到了当前组件的视图中。我们在组件创建的时候会给定一个初始状态(initialState),这个状态在getInitialState这个钩子函数的返回值中给到组件。

reactjs支持我们更改状态,从而引起视图的变化。我们将上述代码进行改造,增加更改视图的时机:

var StyleSheet = reactNative.StyleSheet;
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

var reactNative = require('react-native');
var React = require('react');
var View = reactNative.View;
var Text = reactNative.Text;
var AppRegistry = reactNative.AppRegistry;

var hellowReact = React.createClass({
    getInitialState: function () {
        return {
            name: 'hy'
        };
    },
    changeState: function () {
        this.setState({
            name: 'hysg'
        });
    },
    render: function () {
        return (
            <View style={styles.container} onTouchEnd={this.changeState.bind(this)}>
                <Text>当前的状态是:{this.state.name}</Text>
            </View>
        );  
    }   
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'flex-start',
        backgroundColor: '#fff',
    },
});

AppRegistry.registerComponent('hellowReact', () => hellowReact);

我们看一下上面的代码,在view点击的时候,更新当前组件的状态。并没有强制去更改状态。但是,状态改变了,随即而来的就是视图自动发生了变化,初始状态如图4.0.1,点击后,状态更新,视图随即更新至图4.0.2:

                                图4.0.1

                                图4.0.2

其实我们也能了解到,setState方法,最终就是再次调用render,但是其中会有一些特殊的处理。不过,从上述代码的角度看来,我们只是更改了状态(调用了setState),最终引起了视图的变化,这就是reactjs非常特别的思想。

 

5 事件的绑定


    不同于我们的js或者原生android,我们总是在视图之外,在自己的逻辑代码中,去选取特定元素,并在其上绑定事件。reactjs绑定事件是放在JSX中的。

var hellowReact = React.createClass({
    getInitialState: function () {
        return {
            name: 'hy'
        };
    },
    changeState: function () {
        this.setState({
            name: 'hysg'
        });
    },
    render: function () {
        return (
            <View style={styles.container} onTouchEnd={this.changeState}>
                <Text>当前的状态是:{this.state.name}</Text>
            </View>
        );  
    }   
});

如上,我们把TouchEnd事件绑定在了最外层的View上。事件名称直接写为标签的属性,其值则是对应的事件处理函数。

请注意,与react-web不同的是,事件触发函数的上下文,默认就是本组件。本例中,我们changeState中的this,指代的就是hellowReact的实例。

 

6 全局对象


    在reactNative中,引用全局对象可以使用window或者global,它们都指向一个对象--DedicatedWorkerGlobalScope,其中有jscore提供的方法,也有reactnative注入的方法。我们之后会详细讲解react注入的方法。

 

7 模块化


    ReactNative可以直接使用commonjs的方式去编写模块化的代码,因为使用的packager打包的方式类似于webpack或者browserfy,可以通过require,导入模块,可以通过exports暴露出模块中的方法或者变量。如下面的例子:

var amodule = require('./amodule');

var hellowReact = React.createClass({
    getInitialState: function () {
        return {
            name: amodule.getName()
        };  
    },  
    changeState: function () {
        this.setState({
            name: 'hysg'
        }); 
    },  
    render: function () {
        return (
            <View style={styles.container} onTouchEnd={this.changeState}>
                <Text>当前的状态是:{this.state.name}</Text>
            </View>
        );  
    }   
});

amodule.js中的代码如下:

module.exports.getName = function () {
    return 'hy';
}

不过切记一个模块是一个单例。

 

8 课后作业


本节重在基础学习,所以就没有上传代码例子。各位请自行敲一下上面的代码进行实践。

 

 

接下来,我会和大家一起聊聊react-native的源码编译。另外,近期我也会开设一套react-native-ios的系列教程,不要走开,请关注我.....

http://my.oschina.net/MrHou/blog/708059

原创文章,版权所有,转载请注明出处

 

© 著作权归作者所有

侯禹
粉丝 96
博文 49
码字总数 34362
作品 0
海淀
程序员
私信 提问
选择 Reac​​tJS 的五大理由

ReactJS是一个开源的JavaScript库,并且由Facebook和Instagram这样的顶尖IT企业以及开发者社区所维护。该框架广泛使用于为web应用程序开发用户界面的时候。这个特殊的框架被发明时带有这样一...

达尔文
2016/09/12
4.1K
32
【译】ReactJS 与 Vue.JS - 2019年两个流行 JavaScript 框架的分析

原文 aglowiditsolutions.com/blog/reactj… 关于 ReactJS vs AngularJS 的争论可能已经成为过去。而现在 web 开发者讨论最多的是 Vue.js 和 ReactJS。 前端技术更新速度快,偶尔会出现新的惊...

alentan
06/28
0
0
图解 React Native

在图解 React中,我们介绍了什么是 React 以及是什么使得它如此特别。今天我们将介绍 React Native: 它是做什么的?它出自何处?它和 React 有哪些不同之处?以及何为它如此令人振奋。 学习目...

技术小能手
2018/08/01
0
0
Ionic vs React Native: 前端框架之争,你用的是哪一个

选择合适的平台是开发人员在创建移动应用程序时面临的主要问题之一。据统计,iOS 和 Android 两大巨头已经有超过了十年的竞争。为了从软件开发的预算效益和时间效益的角度来寻求两个平台之间...

周其
2018/02/22
3.8K
2
Facebook 被集体“声讨”,要求更改 ReactJS 许可

Apache 软件基金会上周发布通知,反对使用 Facebook 的 BSD+专利 [ROCKSDB] 许可的流行软件。之后 Facebook 将其开源的 RocksDB 的许可更改为 Apache 2 加 GPL 2 的双重许可,而对于 ReactJ...

达尔文
2017/07/25
4.8K
16

没有更多内容

加载失败,请刷新页面

加载更多

skywalking(容器部署)

skywalking(容器部署) 标签(空格分隔): APM [toc] 1. Elasticsearch SkywalkingElasticsearch 5.X(部分功能报错、拓扑图不显示) Skywalking需要Elasticsearch 6.X docker network create......

JUKE
6分钟前
1
0
解决Unable to find a single main class from the following candidates [xxx,xxx]

一、问题描述 1.1 开发环境配置 pom.xml <plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><!--一定要对上springboot版本号,因......

TeddyIH
7分钟前
0
0
Dubbo服务限制大数据传输抛Data length too large: 13055248, max payload: 8388608解决方案

当dubbo服务提供者向消费层传输大数据容量数据时,会受到Dubbo的限制,报类似如下异常: 2019-08-23 11:04:31.711 [ DubboServerHandler-XX.XX.XX.XXX:20880-thread-87] - [ ERROR ] [com.al...

huangkejie
10分钟前
0
0
HashMap和ConcurrentHashMap的区别

为了线程安全,ConcurrentHashMap 引入了一个 “分段锁” 的概念。具体可以理解把一个大的 map 拆分成 N 个小的 Map 。最后再根据 key.hashcode( )来决定放到哪一个 hashmap 中去。 hashmap ...

Garphy
11分钟前
0
0
购买SSL证书需要注意哪些问题

为了保障网站的基本安全,为网站部署SSL证书,已经是一种常态了。各大浏览器对于安装了SSL证书的网站会更友好,并且不会发出“不安全”的提示。部署SSL证书之前首先得去给网站购买一个SSL证书...

安信证书
40分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部