美文网首页iOS组件化
react-native 常用组件及其实践

react-native 常用组件及其实践

作者: helinyu | 来源:发表于2016-09-28 19:39 被阅读46次

    react native 组件
    react native的强大之处在于能够使用iOS的原生组件和原生API;
    (直接调用原生的AP)

    react native中的view就类似web开发中的div标签;
    (web: div +css )

    1~2 :引入react-native 并且创建app对象


    创建的时候生成的基本的view

    其中AppResgistry、styleSheet 是React Native 提供的API,前者负责注册app入口组件,后者负责创建创建样式表;

    以前可能是使用createClass的方法进行对组件的创建,现在是直接继承了Compo
    nent这个类(好像js中有原型类的概念),并且我们知道index.ios.js 这个文件是程序的入口;
    其中render方法负责渲染视图,并且返回一个对象(null),并且对象只能够包含在一个节点中(即为:返回对象有且只能够有一个对象包裹)

    3、创建样式


    创建样式

    这里的样式和web是一样的,可以是内敛可以是外链(推荐);
    styles = StyleSheet.create({})返回一个样式表对象;
    创建一个样式对象,传入的参数是一个JavaScript字面量对象。这里建议一个组件使用一个StyleSheet对象,而不是多个组件公共一个样式对象;因为这样组建的功能更加细化和解耦,更能够体系那组建的封装;也有利于后续开发者的维护;

    4、给程序应用注册入口


    注册入口

    第一个参数是:我们应用程序的名称,即为项目的名称;
    第二个参数是:入口组件对象,即为如下面创建的对象,虽然看起来是类,不过可以看做对象,应该是JavaScript里面的语法吧!我也有懵逼;

    js中的字面量的理解
    也即是直接定义一个变量:然后对应一个值,JavaScript中直接过可以酱紫,而其他的语言需要初始化方法进行初始化;
    在编程语言中,字面量是一种表示值的记法。例如,"Hello, World!" 在许多语言中都表示一个字符串字面量(string literal ),JavaScript也不例外。以下也是JavaScript字面量的例子,如5、true、false和null,它们分别表示一个整数、两个布尔值和一个空对象。JavaScript还支持对象和数组字面量,允许使用一种简洁而可读的记法来创建数组和对象。考虑以下语句,其中创建了一个包含两个属性的对象(firstName和lastName):
    还可以使用一种等价的方法创建同样的对象:
    字面量参考链接

    基本例子的代码

    相关文章

      网友评论

        本文标题:react-native 常用组件及其实践

        本文链接:https://www.haomeiwen.com/subject/fzqkyttx.html