react-native 常用组件及其实践

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

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

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


react-native 常用组件及其实践_第1张图片
创建的时候生成的基本的view

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

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

3、创建样式


react-native 常用组件及其实践_第2张图片
创建样式

这里的样式和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 常用组件及其实践_第3张图片
基本例子的代码

你可能感兴趣的:(react-native 常用组件及其实践)