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

前端之家收集整理的这篇文章主要介绍了React Native入门(二)之Hello World(AwesomeProject)项目介绍前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

上一篇博客中,我们介绍了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标准的支持,你可以放心使用而无需担心兼容性问题。上面的示例代码中的importfromclassextends、以及() =>箭头函数等新语法都是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>组件,它专门用来显示文本

下面就到两个比较陌生的东西ComponentAppRegistry
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相关内容的学习中了,我们下篇再见!

原文链接:https://www.f2er.com/react/303534.html

猜你在找的React相关文章