RN 的入门了解篇

一、技术准备

在即将接触一项新技术的时候，应该如何入门。第一步肯定是做一下技术准备，每一项技术总是有专门的一套语言，比如 iOS 是 OC 或者 Swift，那么 RN 又是是什么呢？直接的说是 JSX，实际上就是 JS, 毕竟 JSX 是由 JS 进化过来的。就好比 OC 是由 C 语言 进化而来的一样。

那么对于语言基础，我们应该如何准备呢？下面我罗列了一个表：

  • 1.语言
  • 2.变量
  • 3.语句
  • 4.函数
  • 5.对象

感觉任何技术的任何语言，只要弄明白了以上的五个点，那么就可以实战了。这个期间不用太深入，毕竟很多的理解还需要到实战中去。当然了，主要还是看个人悟性的高低。

比如我在学习 变量 的时候，对应着 iOS 开发中的变量来做对比，做了如下的总结：
首先给出代码：

    <!--var 与 let-->
    <script>
        {
            let a_a = '18';
            var b_a = '220';
            // 默认是 var 声明
            c_a = '320';
        }
        // 不能访问
        console.log(a_a);
        // b_a c_a 均可访问
        console.log(b_a);
        console.log(c_a);
    </script>

    <!--全局变量访问-->
    <script>
        // 函数
        function cusFunc()
        {
            // 能访问到 b_a 与 c_a
            console.log("Hello World!" + '_' + b_a + '_' + c_a);
        }
    </script>
    <!--变量删除-->
    <script>
        {
            var a_d = 5;
            b_d = 4;
            let c_d = 7;

            console.log(a_d);
            a_d = 567;
            delete  a_d; // 无效
            // a_d 可以正常使用
            console.log(a_d);

            console.log(b_d);
            b_d = 467;
            delete  b_d; // 删除定义
            //  b_d = 679; // 这一步相当于从新定义了一个变量
            // 报错
            // console.log(b_d);

            console.log(c_d);
            c_d = 789;
            console.log(c_d);
            c_d = 898;
            delete c_d; // 无效
            // c_d 还可以正常使用
            console.log(c_d);
        }

    </script>

    <!--常量定义-->
    <script>
      // ES5
      {
          Object.defineProperty(window, "sex_5", {
              value:'快来男生',
              writable:false,
          });
          console.log(window.sex_5);
          // 只读 无效  不报错
          sex_5 = '快来女生';
          console.log(window.sex_5);
      }

      // ES6
      {
          const sex_6 = '快来女生';
          // sex_6 = '快来女生'; // 直接报错
          console.log(sex_6);
      }

    </script>
    
    <!--变量的前世今生-->
    <script>
      var e_a;
      // undefined
      console.log(e_a);

      // 数字类型
      e_a = 18;
      console.log(e_a);

      // 字符串类型
      e_a = 'Coder';
      console.log(e_a);
    </script>
    
    <!--提升效应-->
    <script>
      // 变量提升 打印 undefined ，不抛出异常
      console.log(xxxx);
      var xxxx = 999;

      // 第一次定义
      function xxxxFunc() {
          console.log('one');
      }

      // d打印的是 two， 不是 One
      xxxxFunc();
      // 第二次定义
      function xxxxFunc() {
          console.log('Two');
      }
    </script>
    <button onclick="cusFunc()">快来点我啊</button>

然后对以上的代码做总结：

1.1 var 与 let 变量

  • 1 通过 var 与 let 均可定义变量。
  • 2 var 属于全局变量，let 主要是限制其作用域，即局部变量。
  • 3 默认（比如 c）为 window 的一个属性。
  • 开发中，尽量使用 let。

1.2 变量删除

除了 window 属性，均不可删除。

1.3 常量的定义

  • 1 ES5 需要借助 Object.defineProperty 来定义常量，给常量赋新值无效，但是不报错。
  • 2 ES6 直接只用 const，给常量赋值无效，直接报错。

1.4 变量的前世今生

同一个变量，可以赋值于任何类型的值。

1.5 变量提升

    1. 可以使用后面定义的 变量，但是当前的值是 undefine。
    1. 同一个同名函数的定义，以最后一个定义的为准。

1.6 异同于 iOS（OC & Swift）

  • 1.var 与 let 仅用于 Swift 中，然而在 Swift 中的 let 代表的是一个常量定义以及可变与不可变之分，与作用域无关。同时 Swift 的变量定义必须要在定义的时候指定其类型，否则报错。
  • 2.iOS 不可以 delete 变量，但是超出作用域就无效。其作用域由定义的位置与括号决定。
  • 3.iOS 中同一个变量只能有一种类型。
以上是我在做 RN 之前对变量的总结，当然其它的小知识点也是类似。

二、创建RN新项目

终端命令：

react-native init HGDev

init

使用 Webstorm 将 HGDev 打开。

image.png

对于初学者来说，只用在乎 App.js 与 index.js 这两个文件即可。

  • index.js 类似 iOS 中的 main.m 文件。
  • App.js 类似 iOS 中的 AppDelegate.m 文件。

三、App.js 的简单介绍

完整内容如下：

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

// 组件的导入,其中包括系统组件与自定义组件的导入
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

// 定义了一个常量字符串, 通过 Platform 来判断在 iOS 与 Android上返回不同的值.
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

// 这个 Props 暂时理解不是太清晰
type Props = {};

// 通过 class 定义一个组件, 在 RN 中出了使用 class, 还能通过函数(function)
export default class App extends Component<Props> {
  // 界面渲染方法
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </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,
  },
});

以上的代码很简单，我也初略的添加了一点注释。总共分成4个部分：

  • 1.组件导入，包括系统组件与自定义组件，关键字： import 与 from。
  • 2.常量定义， 比如 const instructions 与 type props。
  • 3.组件定义，关键字有：export default class extends。
  • 4.定义样式 StyleSheet。

四、一个简单的例子

现在直接在 App.js 中修改，主要使用到的组件为系统的 FlatList。

Simulator Screen Shot - iPhone 6 - 2018-06-30 at 13.05.20.png

具体代码如下：

// 导入组件
import React from 'react'
import {
    View,
    Text,
    StyleSheet,
    FlatList,
    TouchableOpacity,
    Image
} from 'react-native'

// 定义组件
class HGHomeContainer extends React.Component {
    // item 的点击事件
    _itemPress (item) {
        alert(item.title);
    }

    // cell 的组件
    _rendeItem(item) {
        return (
            <TouchableOpacity
                key = {item.index}
                style = {styles.itemStyle}
                onPress = {() => {item.item.func(item.item)}}
            >
                <Image
                    source={require('../sources/home/love.png')}
                    style = {styles.itemImageStyle}
                />
                <View style = {styles.itemRightContentStyle}>
                    <Text style={{marginVertical: 5}}>{item.item.title}</Text>
                    <Text style={{marginVertical: 5}}>{item.item.des}</Text>
                </View>
                <Image
                    source = {require('../sources/home/forward.png')}
                    resizeMode={'center'}
                />

            </TouchableOpacity>
        );
    }

    // 当前组件的渲染函数
    render(){
        // 数据
        let datas = [];
        for (let i=0; i<100; i++) {
            datas.push({title:('标题' + i), key:(i + ''), des:('描述' + i), func:this._itemPress})
        }

        return (
            <View style={styles.container}>
                <FlatList
                data = {datas}
                renderItem = {this._rendeItem}
                />
            </View>
        );
    }
}

// 定义样式
const styles = StyleSheet.create({
    container: {
        flex:1,
        marginTop:30,
    },
    itemStyle:{
        flexDirection:'row',
        alignItems:'center',
        borderBottomWidth:1,
        borderBottomColor:'#E6E6E6',
        marginHorizontal: 10,
        marginVertical: 5,
        paddingBottom:10,
    },
    itemRightContentStyle:{
        justifyContent:'space-between',
        flex:1,
        marginLeft:10,
    },
    itemImageStyle: {
        backgroundColor:'yellow',
        // resizeMode:'stretch',
        width:60,
        height:60,
    }
});

// 导出组件, 作为默认
export default HGHomeContainer;

这个功能主要使用的技术点是 FlatList 组件的使用， 与 ** StyleSheet** 中的 Flex 布局。
这个功能很简单，但是对于初学者来说先弄明白了，显得很重要。其实这些在官网上都有介绍。但是，像 FlatList 在官网上的，有两个例子：一个简单得根本就学不到什么东西，然后接下来给了一个很强悍的例子，强悍的不知所云，只能是自己通过各种的上网查阅。

对于 Flex 布局也是，网上也有很多的额介绍，并且介绍得都很专业，专业得让初学者根本不知道应该如何实战，很少找到一个实际的例子。对于 Flex 布局，参考我上面的例子，再结合下面的这句话，应该理解得就差不多了。

flex:1 表示当前组件可以占满父视图所剩余的空间。 如果当前组件的兄弟组件也带有 flex 属性，那么会按照具体的数字作为比例进行显示。

以上的 所剩余 的意思是排除那些有固定尺寸的组件所占据的空间。

四、项目结构

可以花一两天的时间学习一下：React Navigation.基本上就能对项目结构的搭建有所了解，然后开工进项目吧。
对于项目的搭建，我尝试着弄了一个小 Demo。现在大致的目录结构如下：

image.png

仅供参考，仅仅合适小 Demo。
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,015评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,262评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,727评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,986评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,363评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,610评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,871评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,582评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,297评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,385评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,035评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2赞 270

推荐阅读更多精彩内容

  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    X先生_未知数的X阅读 15,937评论 3赞 118
  • 111
    HXG阅读 87评论 0赞 1
  • 静
    突然之间 想静静 把热情慢慢冷却 将思念缓缓沉淀 就这么静静的 静静的 什么也不想 什么也不做 看是不是 就可以 ...
    开花的树树阅读 163评论 0赞 2
  • 软考高级信息管理-论文之成本管理
    XXXX年X月，我做为项目经理参与了某公司与XXXXX客户的XXXXX管理信息系统。作为项目经理，主要进行了需求分...
    _随心随性阅读 1,241评论 0赞 2
  • 舞女的冤案【通缉令18】
    01 2017年6月12日 00:00 郊外的一间豪华别墅中发生了一起命案，密室杀人案。 本该是夜深人静的时候，可...
    夏至微雪阅读 1,013评论 5赞 19