技术控

    今日:70| 主题:49409
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] [React Native Android 安利系列]ReactNative中的reactjs基础

[复制链接]
双面小丑 发表于 2016-10-1 15:03:13
102 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
这一系列课程说了很多关于react-native的知识,都是有关于样式,底层,环境等知识的,现在我们来学习一下reactjs的基础知识。我们的代码,我们创建的组件的相关知识。
  欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有:
   https://segmentfault.com/blog...
  回顾前几期,我们做过了这么多实践,是时候回过头来看看我们写的JS文件了。
  1. 语法

  我们书写reactjs的时候,当然可以使用ES5的语法。
  [code]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: function () {
        return (
            
                欢迎收看react-native-android系列教程
            

        );  
    }   
});
AppRegistry.registerComponent('hellowReact', () => hellowReact);[/code]  也可以使用ES6的语法,react中内置了packager帮我们进行转换。
  如果使用了es5的语法的话,我们可以看到,我们创建了一个『类』---hellowReact,确切的说,是一个组件。这个『类』必须要有一个render方法。这个render方法的返回值,指定了渲染在APP上的原生层。个人感觉这与android中的xml布局文件类似。
  当然,我们也可以像之前一样,使用es6的语法进行描述。使用真正的类。这里,笔者建议使用ES6的语法去书写RN程序:
  [code]import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    AppRegistry
} from 'react-native';

class hellowReact extends Component {
    render() {
        return (
            
                欢迎收看react-native-android系列教程
            

        );  
    }   
}
AppRegistry.registerComponent('hellowReact', () => hellowReact);[/code]  2. JSX

   不得不说,jsx真是一个神奇的设计,在js代码中,混入xml风格的标签。刚开始接触的话,可能你会不习惯这样的代码形式,但当你习惯了这种语法之后,将浴霸不能
[React Native Android 安利系列]ReactNative中的reactjs基础-1 (reactjs,react,native,reactjs,native,reactjs,redux,native,reactjs,android)

  [code]class hellowReact extends Component {
    render() {
        return (
            
                欢迎收看react-native-android系列教程
            

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

class hellowReact extends Component {
    render() {
        return (
            
               
            

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

  上面,我们已经说到了标签可以是自己创建的组件。我们也写了一个简单的组件。react中,书写自己的组件,可以将应用更加细化的拆分为多个模块。便于模块化的维护代码。自定义的组件在渲染时,可以传入一些属性,在组件内这些属性可以被获取,如图3.0.1:
  [code]class Com extends Component {
    render() {
        return (
            传过来的参数是:{this.props.param}
        );
    }
}

class hellowReact extends Component {
    render() {
        return (
            
               
            

        );  
    }   
}[/code]

[React Native Android 安利系列]ReactNative中的reactjs基础-2 (reactjs,react,native,reactjs,native,reactjs,redux,native,reactjs,android)

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




上一篇:IDG Contributor Network: Best practices in .Net asynchronous programming
下一篇:The Mysterious Fiber Bomb Problem: A Debugging Story
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

浩南 发表于 2016-10-2 01:10:21
为失踪儿童祈福,我们在等你回家!2016-10-02
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表