9. react-native-android之----reactjs基础
2016-06-29 10:47
651 查看
欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有:
http://my.oschina.net/MrHou/blog?catalog=3590216&temp=1466310573630
回顾前几期,我们做过了这么多实践,是时候回过头来看看我们写的JS文件了。学习react-native正像学习武术那样,我们已经学了很久的招式了,现在该回过头扎扎马步了。
1. 语法
我们书写reactjs的时候,当然可以使用ES5的语法。
也可以使用ES6的语法,react中内置了packager帮我们进行转换。
如果使用了es5的语法的话,我们可以看到,我们创建了一个『类』---hellowReact,确切的说,是一个组件。这个『类』必须要有一个render方法。这个render方法的返回值,指定了渲染在APP上的原生层。个人感觉这与android中的xml布局文件类似。
当然,我们也可以像之前一样,使用es6的语法进行描述。使用真正的类。
2. JSX
不得不说,jsx真是一个神奇的设计。在js代码中,混入标签。当你习惯了这种语法之后,将会非常的喜欢它。
从上述代码我们可以看出,jsx中标签的形式与html类似,同样也是需要嵌套的标签层。同样需要闭合的标签。如果需要在JSX中混入js变量的话,则需要使用界符({)进行包裹。其中的js会被解析。JSX中的标签,由react-native基础库提供。当然,我们的标签也可以使用自己创建的组件。如下:
这里需要注意下,文字需要包裹在Text标签中。标签开头接受属性。每个标签的样式可以加载在自己的style属性中。另外还需注意,我们渲染的jsx,最外层只能有一个顶级的元素进行包裹。
3. 组件
上面,我们已经说到了标签可以是自己创建的组件。我们也写了一个简单的组件。react中,书写自己的组件,可以将应用更加细化的拆分为多个模块。便于模块化的维护代码。自定义的组件在渲染时,可以传入一些属性,在组件内这些属性可以被获取,如图3.0.1:
图3.0.1
其实我们在JSX中插入的是一个类名,但是在渲染的时候,会生成一个类的实例。 这里提示一下大家,类的第一个字母需要大写,否则你会收到一个错误.....(如图3.0.2):
图3.0.2
4 状态与更新
在网页开发中,我们的思维总是自己获取数据,自己去更改视图。但是reactjs给我们带来了完全不同的体验。reactjs认为,我们的程序是一个状态机。reactjs为我们提供了VM层,其实我们再回头来看看,我们在写render函数的返回值的时候,不就已经将我们的状态与视图融合在一起了吗?
上面的代码展示了,我们将当前组建的状态(this.state)混入到了当前组件的视图中。我们在组件创建的时候会给定一个初始状态(initialState),这个状态在getInitialState这个钩子函数的返回值中给到组件。
reactjs支持我们更改状态,从而引起视图的变化。我们将上述代码进行改造,增加更改视图的时机:
我们看一下上面的代码,在view点击的时候,更新当前组件的状态。并没有强制去更改状态。但是,状态改变了,随即而来的就是视图自动发生了变化,初始状态如图4.0.1,点击后,状态更新,视图随即更新至图4.0.2:
图4.0.1
图4.0.2
其实我们也能了解到,setState方法,最终就是再次调用render,但是其中会有一些特殊的处理。不过,从上述代码的角度看来,我们只是更改了状态(调用了setState),最终引起了视图的变化,这就是reactjs非常特别的思想。
5 事件的绑定
不同于我们的js或者原生android,我们总是在视图之外,在自己的逻辑代码中,去选取特定元素,并在其上绑定事件。reactjs绑定事件是放在JSX中的。
如上,我们把TouchEnd事件绑定在了最外层的View上。事件名称直接写为标签的属性,其值则是对应的事件处理函数。
请注意,与react-web不同的是,事件触发函数的上下文,默认就是本组件。本例中,我们changeState中的this,指代的就是hellowReact的实例。
6 全局对象
在reactNative中,引用全局对象可以使用window或者global,它们都指向一个对象--DedicatedWorkerGlobalScope,其中有jscore提供的方法,也有reactnative注入的方法。我们之后会详细讲解react注入的方法。
7 模块化
ReactNative可以直接使用commonjs的方式去编写模块化的代码,因为使用的packager打包的方式类似于webpack或者browserfy,可以通过require,导入模块,可以通过exports暴露出模块中的方法或者变量。如下面的例子:
amodule.js中的代码如下:
不过切记一个模块是一个单例。
8 课后作业
本节重在基础学习,所以就没有上传代码例子。各位请自行敲一下上面的代码进行实践。
接下来,我会和大家一起聊聊react-native的源码编译。另外,近期我也会开设一套react-native-ios的系列教程,不要走开,请关注我.....
http://my.oschina.net/MrHou/blog/708059
原创文章,版权所有,转载请注明出处
http://my.oschina.net/MrHou/blog?catalog=3590216&temp=1466310573630
回顾前几期,我们做过了这么多实践,是时候回过头来看看我们写的JS文件了。学习react-native正像学习武术那样,我们已经学了很久的招式了,现在该回过头扎扎马步了。
1. 语法
我们书写reactjs的时候,当然可以使用ES5的语法。
[code=language-javascript]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代码中,混入标签。当你习惯了这种语法之后,将会非常的喜欢它。
[code=language-javascript]var hellowReact = React.createClass({ render() { return ( <View style={styles.container}> <Text>欢迎收看react-native-android系列教程</Text> </View> ); } });
从上述代码我们可以看出,jsx中标签的形式与html类似,同样也是需要嵌套的标签层。同样需要闭合的标签。如果需要在JSX中混入js变量的话,则需要使用界符({)进行包裹。其中的js会被解析。JSX中的标签,由react-native基础库提供。当然,我们的标签也可以使用自己创建的组件。如下:
[code=language-javascript]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:
[code=language-javascript]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函数的返回值的时候,不就已经将我们的状态与视图融合在一起了吗?
[code=language-javascript]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支持我们更改状态,从而引起视图的变化。我们将上述代码进行改造,增加更改视图的时机:
[code=language-javascript]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中的。
[code=language-javascript]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暴露出模块中的方法或者变量。如下面的例子:
[code=language-javascript]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中的代码如下:
[code=language-javascript]module.exports.getName = function () { return 'hy'; }
不过切记一个模块是一个单例。
8 课后作业
本节重在基础学习,所以就没有上传代码例子。各位请自行敲一下上面的代码进行实践。
接下来,我会和大家一起聊聊react-native的源码编译。另外,近期我也会开设一套react-native-ios的系列教程,不要走开,请关注我.....
http://my.oschina.net/MrHou/blog/708059
原创文章,版权所有,转载请注明出处
相关文章推荐
- 三种禁用FileSystemObject组件的方法
- 用vbs列出机器上所有能调用的组件
- 剖析ASP.NET MVC的DependencyResolver组件
- asp水印组件之AspJpeg的结合代码实例
- Node.js编写组件的三种实现方式
- Bootstrap表单组件教程详解
- JS上传组件FileUpload自定义模板的使用方法
- 适用于WebForm Mvc的Pager分页组件C#实现
- js组件SlotMachine实现图片切换效果制作抽奖系统
- Android搜索框组件SearchView的基本使用方法
- 浅析Bootstrap缩略图组件与警示框组件
- 第九章之路径分页标签与徽章组件
- JS组件Bootstrap ContextMenu右键菜单使用方法
- JavaScript资源预加载组件和滑屏组件的使用推荐
- 浅谈Sticky组件的改进实现
- 编写轻量ajax组件01-与webform平台上的各种实现方式比较
- Ajax核心XMLHTTP组件资料第1/2页
- JS组件系列之Bootstrap Icon图标选择组件
- jQuery Chart图表制作组件Highcharts用法详解
- jQuery技巧之让任何组件都支持类似DOM的事件管理