您的位置:首页 > Web前端 > React

React Native入门(二)之Hello World(AwesomeProject)项目介绍

2017-07-13 16:18 357 查看

前言

在上一篇博客中,我们介绍了RN环境的搭建,以及遇到的各种坑,历经千辛万苦,终于算是完成了!也生成了一个项目,下面呢,我们就来简单了解一下生成的这个项目及相关的问题

项目目录

我们使用
react-native init AwesomeProject
命令,生成了一个AwesomeProject的项目,这个项目呢就算是我们RN的第一个Hello World项目了!我们打开这个项目:



整个项目的目录就如上图所示。

andoid/ios
各自存放了一个相关平台的工程 project,这个目录中的内容我们再熟悉不过了!(iOS另说,哈哈哈!)

node_modules
里面是自动生成的 node 依赖之类的文件,通过读取
package.json
里的配置来生成。

index.android.js/index.ios.js
这两个文件分别对应两个平台,也是比较核心的内容,我们的RN应用中,这些js脚本扮演很重要的角色!说白了,就是开发一个个的js脚本!

index.android.js

下面我们来看一下
index.android.js
的内容:

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

export default class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

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


我是没有前端基础的,但是上面的代码,还是大概知道表达的什么意思!

在查阅了一些资料后,上边的代码是ES2015(也叫作ES6)的语法——这是一套对JavaScript的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现,所以目前而言web开发中还很少使用。React Native内置了对ES2015标准的支持,你可以放心使用而无需担心兼容性问题。上面的示例代码中的
import
from
class
extends
、以及
() =>
箭头函数等新语法都是ES2015中的特性。

关于学习了解ES2015的话,可以看看阮一峰老师的书:

ECMAScript 6 入门

还有论坛的这篇总结:

React/React Native 的ES5 ES6写法对照表

对我们了解ES6非常有帮助,也有助于阅读RN中的代码!

其实上边的
import...from...
,类似java中的导包,意思就是
从...中导入...
,这样就很好理解了!

好了,接着看中间一段代码,对于
class...extends...
,这个也跟java类似!然后
<View>
标签包含3个
<Text>
标签,跟我们平时写布局的时候也差不多,就是一般的xml。

只不过,这里这些xml标签是在js脚本中嵌套的,这叫做JSX——是一种在JavaScript中嵌入XML结构的语法。(涨姿势了!)

在中文官网中有讲到,很多传统的应用框架会设计自有的模板语法,让你在结构标记中嵌入代码。React反其道而行之,设计的JSX语法却是让你在代码中嵌入结构标记。初看起来,这种写法很像web上的HTML,只不过使用的并不是web上常见的标签如
<div>
或是
<span>
等,这里我们使用的是React Native的组件。上面的示例代码中,使用的是内置的
<Text>
组件,它专门用来显示文本


下面就到两个比较陌生的东西
Component
AppRegistry


Component
组件,我的理解就类似一个布局,这个布局可以很复杂,也可以很简单,我们可以使用
class...extends Component
来定义一个我们自己的组件,当然应用是由一个个不同的组件组成,唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句,也就是上边代码中

render() {
return (
//...jsx语句(就是我们熟悉的布局)
);
}


好了下面说
AppRegistry


AppRegistry
模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。你无需在此深究,因为一般在整个应用里
AppRegistry.registerComponent
这个方法只会调用一次。(这里我们先记着要这样用就行了!),就是最后一段代码

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


需要注意的一点就是代码中单引号内的内容是我们init项目的时候的项目名称,
() =>
后边的是我们自己定义的组件名称,别弄混了!


另外这里的箭头函数是ES6中新增的,
() => AwesomeProject
相当于:

function() { return AwesomeProject }


这里先了解就可以了!

接下来我们看第三段代码:

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
...
},
instructions: {
...
},
});


这个不就是我们在Android中写的style嘛,里边是需要设置的view的各个属性,然后在引用的时候,这样写:

<View style={styles.container}>
<Text style={styles.welcome}>
.........
</Text>
</view>


还是比较容易理解的,在标签内使用
style={声明的变量.具体的style名字}
,就可以引用我们定义的style了!

结语

好了本篇关于RN初始化的Hello World项目进行了简单的分析介绍,算是入了门了,接下来就正式进入到RN相关内容的学习中了,我们下篇再见!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: