阅读 12

React-Native 学习笔记(一)

学习RN的学习笔记,记录下来分享于大家~

来源: 官网 + 其他资料
复制代码

一、宽&高

像素无关

React Native 中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点(设备独立像素)。

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

export default 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>
    );
  }
}
复制代码

运行在不同平台回呈现不同的单位,如果是在android上,100表示100dp,如果100修饰字体,则替换为是100sp。如果是运行在了ios上则100表示100pt。这样确保了我们的布局在不同的手机上不会发生变化。

flex宽高

一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。

如果有多个并列的子组件使用了flex:1,则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样,则谁的值更大,谁占据剩余空间的比例就更大。

二、Flex布局

RN中的flex布局同我们往常使用的CSS Flex存在一些不同(并不完全一样)。

不同之处

  • flexDirection: 在RN中默认是column,但是在CSS中是row。
  • alignItems:在RN中默认是stretch,CSS中默认是flex-start。
  • 在web CSS中flex可以设置多个参数,但是在RN中只能设置一个参数。比如:flex:1;
  • 不支持属性:align-content,flex-basis,order,flex-flow,flex-grow,flex-shrink。

1、父容器所设置的属性

flexDirection

决定我们布局的排列方向。

justifyContent

可以决定其子元素沿着主轴的排列方式。

flex-start、center、flex-end、space-around、space-between以及space-evenly。

alignItems

可以决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。

flex-start、center、flex-end以及stretch。

flex-wrap

决定我们的元素能否换行。(也就是是否允许多行显示)

wrap、nowrap

2、子视图属性

alignSelf

用于设置单独子元素的alignItem对其方式。

auto、flex-start、flex-end、center、stretch。

flex

定义的我们元素的可伸缩的属性。

布局属性大全

三、创建组件的方式

1、ES6

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


export default class HelloComponent extends Component {
  render () {
    return <Text style={{color: '#ddd'}}>hello</Text>
  }
}
复制代码

2、函数式组件

const HelloComponent = () => {
  return <Text style={{color: '#ddd'}}>hello</Text>
}
export default HelloComponent
复制代码

3、ES5组件

var HelloComponent = React.createClass({
    render () {
      return <Text style={{color: '#ddd'}}>hello</Text>
    }
});

module.exports = HelloComponent;

复制代码

四、生命周期(Component Lifecycle)

在iOS中UIViewController提供了(void)viewWillAppear:(BOOL)animated, - (void)viewDidLoad,(void)viewWillDisappear:(BOOL)animated等生命周期方法,在AndroidActivity则提供了 onCreate(),onStart(),onResume() ,onPause(),onStop(),onDestroy()等生命周期方法,这些生命周期方法展示了一个界面从创建到销毁的一生。

在React 中组件(Component)也是有自己的生命周期方法的。

组件的生命周期分成三个状态:

  • mounting 挂载阶段
  • updating 更新阶段
  • unmounting 卸载阶段

心得:你会发现这些React 中组件(Component)的生命周期方法从写法上和iOS中UIViewController的生命周期方法很像,React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用。

Mounting装载阶段

  • getInitialState:在组件挂载之前调用一次,比如我们通常在这里初始化我们的state。
  • componentWillMount: 服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。
  • componentDidMount(): 初始化渲染完成之后调用,只调用一次,仅客户端有效(服务器端不会调用)。

UpdatIng更新阶段

  • componentWillReceiveProps(object nextProps): 在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。

    用此函数可以作为 react 在 prop 传入之后, render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。

  • shouldComponentUpdate(object nextProps, object nextState):在接收到新的 props 或者 state,将要渲染之前调用。

    该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会。如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。

    心得:我们可以借助该方法来实现一些优化,比如可以根据新的props和state来决定是否需要重新渲染页面

  • componentWillUpdate(object nextProps, object nextState):在接收到新的 props 或者 state 之前立刻调用。

    注意:你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变,请使用 componentWillReceiveProps。

  • componentDidUpdate(object prevProps, object prevState): 在组件的更新已经同步到 DOM 中之后立刻被调用。

    使用该方法可以在组件更新之后操作 DOM 元素。

UnMounting卸载

  • componentWillUnmount:在组件从 DOM 中移除的时候立刻被调用。

    在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

五、React-native定义样式

1、方式一: 内联样式

<Text style={{color: '#ddd'}}>hello</Text>
复制代码

2、方式二:


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

export default class HelloComponent extends Component {
  render () {
    return <Text style={styles.container}>hello</Text>
  }
}


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#eae7ff',
    flex: 1
  }
});

复制代码

六、React-native常用样式

七、React-native View组件

关注下面的标签,发现更多相似文章
评论