React Native 系列(一) -- JS入门知识

前言

本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过ReactJS,本文的目的是为了给那些JSReact小白提供一个快速入门,让你们能够在看React Native语法的时候不那么费劲,有过前端开发经验的可以直接忽略。

准备工作

  • 搭建开发环境 首先搭建React Native开发环境,搭建过程就不描述了。(ps:这里笔者默认各位看官已经搭建好了开发环境)。
  • 初始化项目 在终端执行: react-native init Hello --version 0.44.3 init命令默认会创建最新的版本,而从0.45及以上版本开始需要下载boost库编译。 此库体积庞大,在国内即便FQ也很难下载成功,导致很多人无法正常运行iOS项目。中文网在 论坛中提供了这些库的国内下载链接。如果你嫌麻烦,又没 有对新版本的需求,那么可以暂时创建0.44.3的版本。 执行此命令的时候不要FQ。(我也不知道为什么,一开始打开蓝灯,一直失败,退出蓝灯之后,就能安装成功。) 执行成功之后,会生成如下文件:
  • 运行项目 由于笔者电脑上android的环境没有配置,所以本系列讲述的都是在index.ios.js上修改。(注意:每次修改代码,不需要重新运行,只需要保存修改,然后使用command + R就能动态刷新) 运行项目有两种方式:
    1. 在终端执行 react-native run-ios
    2. 直接用xcode打开上述文件中的Hello.xcodeproj,然后在xcode运行;

默认创建的index.ios.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';

// 类,这是默认的载入类,继承自Component,Component类似于Android和iOS中的View
export default class Hello 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.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake 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('Hello', () => Hello);

什么是JavaScript

JavaScript(简称JS)是一个轻量级的,解释型的将函数视为一级公民的程序设计语言。它是一种基于原型的多范式动态脚本语言,支持面向对象,命令式编程和函数式编程。

JS的标准是ECMAScriptReact Native是基于ECMAScript 6,简称ES6

tips: JavaJS语法很像,但是用处完全不同,而且也是两个几乎没有关系的东西。

关于JavaJS的区分,可见下表:

JavaScript

Java

面向对象。不区分对象类型,通过原型机制继承,任何对象的属性和方法均可被动态添加。

基于类系统。分为类和实例,通过类层级的定义实现继承。不能动态增加对象或类的属性或方法

变量类型不需要提前声明(动态类型)

变量类型必须提前声明(静态类型)

不能直接写入硬盘

可以直接写入硬盘

JS的基础知识

声明

  • var声明变量,可以在声明的时候初始化一个值。
  • let声明块范围内的局部变量,可以在声明的时候初始化一个值。
  • const声明一个只读常量,声明的时候必须初始化。

tips: JS是大小写敏感的

变量和常量

  • 命名要以数字字母下划线开头 例如,在class Hello上面添加两行: var mainText = "学习React Native" var subText = "欢迎阅读" Tips:JS是一个动态类型语言(dynamically typed language)中,所以变量不需声明类型,必要的时候自动转换。 然后,修改index.ios.js,让text来显示这两个变量: export default class Hello extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> {mainText} </Text> <Text style={styles.instructions}> {subText} </Text> </View> ); } } 然后save,选择模拟器,command + R刷新,就可以看到如下截图:

可以看到index.ios.js文件最下面,类似 const styles = StyleSheet.create(); 就是一个常量,声明的时候必须初始化。

数据结构和类型

六种基本的原型数据类型:

  • Boolean: 布尔值,true或者false
  • null: 一个表明null的特殊关键字,注意JS中大小写敏感,nullNULL是完全不同的东西
  • undefined: 变量未定义的属性
  • Number: 数字
  • String: 字符串
  • Symbol: ES6中新增的,唯一不可变的

以及Object对象类型

流程控制

  • if, else
  • switch
  • for
  • while
  • break
  • continue

这个各个语言都差不多相同,就不在详细描述了,有一点要提一下,就是JSswitchcase可以是String类型。

还有需要注意的点,以下值在JS中会识别为false

false
undefined
null
0
NaN
空字符串 ("")

注释

// 这是一个单行注释

/* 这是一个多行注释,可以换行 */

函数

函数的定义如下,由function关键字声明,在()添加输入,输入不需要声明类型:

function scottLog(t){
    console.log(t)
}

我们接着上述项目,添加一个可点击的TouchableHighlight,在import{}里面添加一行TouchableHighlight,它看起来像这样:

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

然后,我们重新定义变量和类的内容:

function scottLog(input) {
    console.log(input)
}

export default class Hello extends Component {
  render() {
    return (
        <TouchableHighlight onPress={() => scottLog("点击了我")} style={styles.container}
                            underlayColor = "#ddd">
          <Text style={styles.welcome}>
            {mainText}
          </Text>
        </TouchableHighlight>
    );
  }
}

保存,选中模拟器,command + R,再点击屏幕任意位置,看xcode控制台输出。 上述代码的scottLog(input)方法是定义在全局的,当定义在类中的时候,不需要function关键字,通过this.functionName()来访问:

export default class Hello extends Component {
  render() {
    return (
        <TouchableHighlight onPress={() => this.scottLog("点击了我")} style={styles.container}
                            underlayColor = "#ddd">
          <Text style={styles.welcome}>
            {mainText}
          </Text>
        </TouchableHighlight>
    );
  }

  scottLog(input){
      console.log(input)
  }
}

箭头函数

没有接触过JS的同学可能会对上述的() => this.scottLog()这一行感到很奇怪,其实这里onPress是一个函数类型(在JS中,函数本身也是一种类型)。这其实是JS的箭头函数,它提供了一种更简洁的函数表达式。我们修改上述的scottLog(input)函数,

scottLog(){
      var a = ["zhangsan", "lisi", "wangwu"];
      var a2 = a.map(function (s) {
          return s.length
      })

      var a3 = a.map((s) => s.length)
      console.log(a2)
      console.log(a3)
  }

保存,选中模拟器,Commnad+R刷新,可以看到两个log的内容是一样的。也就是说,(s)用来描述参数,=>后的表示方法的执行体。学过swift的童鞋,会发现和swift的闭包很像。

数组

可以由以下三种方式创建数组,访问数组的方式还是通过角标来访问

var test = [1, 2, 3, 4]
var test2 = new Array(1, 2, 3, 4)
var test3 = Array(1, 2, 3, 4)

console.log(test[1])

数组的一些其他操作,可以在MDN查找。

字典

var map = {"key1":"value1","key2":"value2"}
map["key3"] = "value3"

console.log(map["key1"])
console.log(map["key3"])

对象

JS中的对象的属性可以不先声明,而在运行时候动态添加,例如:

var p = new Object()
p.name = "scott"
console.log(p.name);

所以,在React Native中,写代码的时候,存储数据直接this.propertyName =即可。

致谢

如果发现有错误的地方,欢迎各位指出,谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏日常分享

$.ajax()方法详解

1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。

2012
来自专栏自动化测试实战

接口测试框架——第二篇

3728
来自专栏林德熙的博客

代码段

但很多时候我们需要使用通知OnPropertyChanged,这时在 VisualStudio 就没有写好的,如果是写属性,这样每个都来增加一句OnProper...

1611
来自专栏阮一峰的网络日志

命令行通配符教程

一次性操作多个文件时,命令行提供通配符(wildcards),用一种很短的文本模式(通常只有一个字符),简洁地代表一组路径。

752
来自专栏PHP实战技术

Mysql字段类型设计相关问题!

Mysql是以文件存储在我们的系统的硬盘上面,那么

2968
来自专栏cnblogs

Javascript的内存泄漏分析

     作为程序员(更高大尚的称谓:研软件研发)的我们,无论是用Javascript,还是.net, java语言,肯定都遇到过内存泄漏的问题。只不过他们都有...

1072
来自专栏北京马哥教育

Python 基础语法

Python语言与Perl,C和Java等语言有许多相似之处。但是,也存在一些差异。 在本章中我们将来学习Python的基础语法,让你快速学会Python编程...

3936
来自专栏coding...

swift3.0 基础练习-实现99乘法表

703
来自专栏lgp20151222

thymeleaf中th:attr用法以及相关的thymeleaf基本表达式

${}变量表达式:用于访问容器上下文环境中的变量; *{}选择表达式:选择表达式与变量表达式有一个重要的区别:选择表达式显示的是选定的对象。选择的对象是一个:t...

1341
来自专栏dotnet & java

datatables 配套bootstrap样式使用小结(2) ajax篇

上一篇是介绍一下基本的用法,基本的原理是取出所有的数据,然后调用$.datatables(option)方法格式化,这种方法显然不太科学,所以ajax方式是必须...

971

扫码关注云+社区

领取腾讯云代金券