学习ReactNative笔记

飞翔的超人
852 阅读7分钟

1.ES6语法

1.导出导入语法

可能报错: Element type is invalid

ES5的导出导入语法：

module.exports = Page2;
var NaviBar = require('./NaviBar');

ES6的导入导出语法：

export  default class Page2 extends Component
import NaviBar from './NaviBar';

Demo中使用了错误的导入方法

import { AppRegistry } from 'react-native';
import { FirstView } from './Demo/ViewDemo.js';

正确的是

import { AppRegistry } from 'react-native';
import FirstView from './Demo/ViewDemo.js';

导出带有default,export default,引用时可以不加大括号。导出没有带default,引用时要加大括号

2.三点操作符

属性前面的三个点（...props），是延展操作符。 在React中，延展操作符一般用于属性的批量赋值。比如

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

等同于

var props = {};
props.foo = x;
props.bar = y;
var component = <Component foo={x} bar={y} />;

使用延展操作符的好处是，当你的属性有所增加的时候，组件中的使用不需要去增加对应的属性。

3.es5和es6更新状态写法对比

  • state
getInitialState(){
        return {
            currentPage: 0,
        }
},

constructor(props) {
        super(props);
        this.state = {
            selectedTab: tabBarItems[0].title,
        };
}
  • props
getDefaultProps(){
        return {
            duration: 3000,
        }
},

static defaultProps = {
    visible: false,
}

4.bind函数

5.模板字符串

6.ES6中箭头函数加不加大括号的区别

  • 不加{}，这时箭头函数指向的就是这个函数的返回值
  • 种加{}，要写上返回值，加上return就跟不加大括号一样

2.JS基础知识

1.let和var

2.判断数组中是否存在某个元素

3.遍历对象的所有值

4.遍历对象的所有属性的key和value

5.javascript中let和var的区别

javascript中let和var的区别

6.点击事件的两种写法

  • 箭头函数
<TouchableOpacity
    //按下时透明度变化
    activeOpacity={0.5}
    onPress={() => this.activeEvent('点击')}
>
    <Text style={{
        color: 'white',
        fontSize: 20,
    }}>登录</Text>
</TouchableOpacity>

activeEvent(event) {
    Alert.alert(event)
}
  • bind绑定（推荐）
<View style={styles.contanier} >
        <Text onPress={this.timePlus.bind(this)}>点击 </Text>
</View>
timePlus() {
    ......
}

7.数组的相关方法

arr = [2,4,5,7,8]

  • 遍历
    • for循环
    • foreach循环，没有返回值
        arr.forEach((item,index,array)=>{

    })
    • map循环，map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；
         var res = arr.map((item,index,arr )=>{ 
         return item*10; 
     }) 
     console.log(res);//-->[20, 40, 50, 70, 80];  原数组拷贝了一份，并进行了修改
     console.log(arr);//-->[2, 4, 5, 7, 8]；  原数组并未发生变化
  • 删除
    • delete方法。delete删除掉数组中的元素后，会把该下标出的值置为undefined,数组的长度不会变
        delete arr[1]
    console.log(arr);//[2, undefined, 5, 7, 8]
    • splice(index,len,[item]).该方法会改变原始数组。splice有3个参数，它也可以用来替换/删除/添加数组内某一个 index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空
        arr.splice(1,1)
    console.log(arr)//[2, 5, 7, 8]

        arr.splice(1,2)
    console.log(arr)//[2, 7, 8]

8.异步编程方法

1.使用回调函数

setTimeout(function()
{
    console.log('Hello'); // 1秒后输出"Hello"
    setTimeout(function()
    {
        console.log('Hi'); // 2秒后输出"Hi"
    }, 1000);
}, 1000);

2.Promise对象

var waitSecond = new Promise(function(resolve, reject)
{
    setTimeout(resolve, 1000);
});

waitSecond
    .then(function()
    {
        console.log("Hello"); // 1秒后输出"Hello"
        return waitSecond;
    })
    .then(function()
    {
        console.log("Hi"); // 2秒后输出"Hi"
    });

3.async/await

  • 申明耗时方法
    waitSecond() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('sucess');
            }, 600);
        });
    }
  • 调用
   async test() {
        const result = await this.waitSecond();
        console.warn(result);
    }
    this.test();

3.ReactNative知识

1.生命周期

不能在shouldComponentUpdate方法中setState

新生命周期

  • 在构造方法里setState({})
  • getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。需要注意的是，如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾。
static getDerivedStateFromProps(nextProps, prevState) {
    const {type} = nextProps;
    // 当传入的type发生变化的时候，更新state
    if (type !== prevState.type) {
        return {
            type,
        };
    }
    // 否则，对于state不进行任何操作
    return null;
}

2.让Text自适应，并且居中居中

    parent: {
        backgroundColor:'blue',
        marginTop: 20,
        paddingTop: 50,
        paddingBottom: 50,
    },
    text: {
        fontSize: 20,
    }

父组件默认竖直显示,此时Text组件默认横向全屏

    item: {
        backgroundColor:'blue',
        marginTop: 20,
        paddingTop: 50,
        paddingBottom: 50,
        justifyContent: 'center', 
        flexDirection: 'row'
    },
    text: {
        fontSize: 20,
        backgroundColor: 'red',
    }

添加属性justifyContent: 'center', flexDirection: 'row',即可让Text自适应大小，并且水平居中

3.RN中的this

React Native之this详解

只要不在render函数的返回组件中使用this.props或者this.setState，那么this就作用于当前操作对象
如何在render函数的return中使用this.props或者this.setState呢？

  • 在构造方法constrctor中绑定，绑定方式如下： this.函数名 = this.函数名.bind(this)
  • 在Render函数的组件中直接绑定，绑定方法如下： {this.函数名.bind(this)}
  • 使用箭头函数，因为在ES6中，箭头函数是自己的this值的，所以箭头函数内的this值继承自外围作用域，因此，在箭头函数中是可以直接使用this的

4.React Native 全局变量Global

  • 创建全局变量文件
  • 导入
  • 直接使用

5.使用PropTypes类型检查

因为在React 15.5.0 之后的版本中，将PropTypes从React库中废除掉了，因此在React 15.5.0 之后的版本，我们就不要再已这种方式导出PropTypes了

import React, { Component, PropTypes} from 'react'

更换为：

import { ViewPropTypes } from 'react-native'
import PropTypes from 'prop-types'

安装prop-types库

npm install prop-types --save

具体使用

import React, {Component} from 'react';
import {
    Text,
    View
} from 'react-native';
import PropTypes from 'prop-types'

export default class PropsTest extends Component{
    //设置默认属性方法一
    static defaultProps={
        name:"小红",
        age:20,
        sex:"男"
    }
    //类型检测方法一
    /*static propTypes={
        name:PropTypes.string,
        age:PropTypes.number,
        sex:PropTypes.string.isRequired,
    }*/
    render(){
        return (
            <View>
                <Text style={{fontSize:20,backgroundColor:'red'}}>你好: {this.props.name}</Text>
                <Text style={{fontSize:20,backgroundColor:'red'}}>年龄: {this.props.age}</Text>
                <Text style={{fontSize:20,backgroundColor:'red'}}>性别: {this.props.sex}</Text>
            </View>
        );
    }
}
//设置默认属性方法二
/*PropsTest.defaultProps={
    name:"小红",
    age:20,
    sex:"男"
}*/

//类型检测方法二
PropsTest.propTypes={
    name:PropTypes.string,
    age:PropTypes.number,
    sex:PropTypes.string.isRequired,
}

 # 数组类型
 PropTypes.array

 # 布尔类型
 PropTypes.bool

 # 函数类型
 PropTypes.func

 # 数值类型
 PropTypes.number

 # 对象类型
 PropTypes.object

 # 字符串类型
 PropTypes.string

 # 规定prop为必传字段
 PropTypes.func.isRequired

 # prop可为任意类型, 任意不为空对象
 PropTypes.any

#数组中元素的类型
PropTypes.any. arrayOf()

#React 元素
PropTypes.element

#类实例
PropTypes.instanceOf()

#每个值的类型都是基本类型
PropTypes.node

#参数是数组, 指定传的数据为数组中的值,可以当做枚举类型使用
PropTypes.oneOf()

e.g-比如
color: PropTypes.oneOf(['red', 'blue', 'black'])

# 参数是数组, 指定传的数据为数组中的类型
 PropTypes.oneOfType()
 
 #  指定对象类型内部的结构定义
  PropTypes.shape()
  e.g-比如
  model:PropTypes.shape(
        {
          id: PropTypes.string,
          name: PropTypes.string 
        }
      )

5.默认Props

通过组件类的 defaultProps 属性为 props 设置默认值(static里面的赋值操作会在app一运行 就会调用)，实例如下：

export default class PropComponent extends Component {
    static defaultProps={
         name: '张三',
         sex:'man',
         tel:'13866666666'
        }
}

声明defaultProps 属性后，在遇到没有被赋值的属性时，就会读取默认属性值。

6.布局详细解析

布局详细解析

4.ReactNative三方库

1.react-navigation2.0以前版本和3.0以后版本区别

2.0以前版本：
  • StackNavigator - 一次只渲染一个页面，并提供页面之间跳转的方法。 当打开一个新的页面时，它被放置在堆栈的顶部
  • TabNavigator - 渲染一个Tab选项卡，让用户可以在几个Tab页面之间切换
  • DrawerNavigator - 提供一个从屏幕左侧滑入的抽屉，类似bilibili和QQ的隐藏在左侧的内容栏功能
新版本：

  • StackNavigator --> createStackNavigator

  • TabNavigator --> createBottomTabNavigator 也可以使用

  • createStackNavigator 返回的结果需要再用createAppContainer包裹  const MainNavigator = createAppContainer(stackNavigator );\

3.x版本必须安装react-native-gesture-handler

使用方法参考:https://reactnavigation.org/docs/en/3.x/getting-started.html和https://zhuanlan.zhihu.com/p/67967551

注意: 多个navigation嵌套

假设第一个navigation配置了A和B，A里面配置了第二个navigation，C和D。在C想要跳转到A时，应该使用第一个navigation的navigate方法

5.工具使用

1.chrome调试自动打断点的问题

在用chrome调试页面时，一刷新页面总会自动打断点。所有的breakpoints都已经取消。把调试面板上的第5个按钮从Deactivate breakpoints 改成Activate breakpoints.解决问题

avatar
文章
阅读
粉丝