有一种选择叫做格子里

发表于 更新于 分类于 Waline： 本文字数： 109 阅读时长 ≈ 1 分钟

监听 APP 当前所处的状态 (处于后台还是当前运行状态)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- 在APP加载的第一个js入口处  -->

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

export default class App extends Component {

<!-- 在生命周期函数中创建监听函数 -->
  componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChange)
  }


  handleAppStateChange = (currentAppState) => {
      if (currentAppState === 'active') {
        console.log('我又进来了')
        <!-- do something -->
      } else {
        console.log('现在在后台')
        <!-- do something -->
      }
  }

  render() {
    console.disableYellowBox = true
    return (
      <View>
        <Text>
          我的第一个RN App
        </Text>
      </View>
    );
  }
}
阅读全文 »

发表于 更新于 分类于 Waline： 本文字数： 1.6k 阅读时长 ≈ 6 分钟

React-Navigation

  • npm or yarn install React-navigation
1
2
npm install react-navigation --save   or
yarn add  react-navigation
  • 使用 react-navigation 必须创建导航器，react-navigation 自带三种导航器
    • StackNavigator - 为您的应用程序在每个新屏幕放置在堆栈之上的屏幕之间进行切换
    • TabNavigator -用于设置多个选项卡的屏幕(tab)
    • DrawerNavigator -用于设置带抽屉导航的屏幕
阅读全文 »

发表于 更新于 分类于 Waline： 本文字数： 440 阅读时长 ≈ 2 分钟

数组

数组对象的作用是:使用单独的变量名来存储一系列的值

数组常用的方法及属性

  • arr.length;
  • 获取值 var a = arr[0];
  • 给数组赋新值 arr[1] = ‘新值’;
  • 将新元素添加到数组末尾，并返回新数组的长度–>arr.push(a,b,c,d,e…);
  • 将新元素添加到数组开始，并返回新数组的长度–>arr.unshift(a,b,c,d,e…);
  • 删除数组的最后一项，并返回被删除的元素–>arr.pop();
  • 删除数字第一个元素，并返回被删除的元素–>arr.shift();
  • arr.splice(1,2)–>从 1 的位置开始（包含 1）向后删除两个元素，数组形式返回所移除的元素
1
2
3
var arr = [1, 2, 3, 4, 5, 6, 7];
var arr2 = arr.splice(1, 2);
console.log("arr:%o, arr2: %o", arr, arr2); // arr: [1,4,5,6,7]   arr2: [2,3]
阅读全文 »

发表于 更新于 分类于 Waline： 本文字数： 1.9k 阅读时长 ≈ 7 分钟

今天在讲解 Flexbox 之前，我们先讲解一下高度和宽度的问题。因为 Height and Width 的问题很简单，就不单独写一篇文章了。顺带说一下即可。

Height and Width

一个组件的高度和宽度，决定了它在屏幕上显示的大小。

固定尺寸

最简单的设置组件的尺寸的方法就是通过添加一个固定的宽度和高度。所有尺寸大小在 React Native 没有单位的,代表着独立的像素密度。

官网例子 01

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from "react";
import { AppRegistry, View } from "react-native";

class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View
          style={{ width: 50, height: 50, backgroundColor: "powderblue" }}
        />
        <View style={{ width: 100, height: 100, backgroundColor: "skyblue" }} />
        <View
          style={{ width: 150, height: 150, backgroundColor: "steelblue" }}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent("AwesomeProject", () => FixedDimensionsBasics);
阅读全文 »

发表于 更新于 分类于 Waline： 本文字数： 1.3k 阅读时长 ≈ 5 分钟

js 中创建对象最简单的方法自然是直接 new 一个 Object 然后再为其添加属性和方法，例如一下代码：

1
2
3
4
5
var o = new Object();
o.name = "aaaa";
o.sayName = function () {
  alert(this.name);
};

但这样显然封装性太差，属性和方法分布在各个地方。
所以最容易想到的就是写一个函数来封装创建对象的过程，这就是设计模式中常用的工厂模式。

下面我们就先介绍一下工厂方法模式创建对象的方法

工厂模式

先直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createStudent(no, name, age, class)
{
    var o = new Object();
    o.no = this.no;
    o.name = this.name;
    o.age = this.age;
    o.class = this.class;
    o.sayName = function() {
            alert(this.name);
    }
  return o;
}

var stu1 = createStudent(5,"chi",34,1);
stu1.sayName();
阅读全文 »
0%