React-Native 学习笔记（一）

川长思鸟来 2022-01-20 00:41 266阅读 0赞

> 学习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**

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

[布局属性大全][Link 1]

# 三、创建组件的方式 #

## 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`等生命周期方法，在`Android`中`Activity`则提供了 `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组件 #

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Freactnative.cn%2Fdocs%2Flayout-props%2F