React Native 基础知识总结

发布于 2023-05-16 22:57:20 字数 7178 浏览 83 评论 0

Component

Component：组件，使用 extends React.Component 创建的类为组件。 componentWillMount() 还可以用 constructor 来代替：

  class Label extends React.Component{
  constructor(props) {
    super(props);  
  }
  render(){
  }
}

props 属性

组件可以定义初始值，自己不可更改props属性值，只允许从父组件中传递过来：

  // 父组件
class ParentComponent extends React.Component{
  render(){
    return(<Child name="name">);
  }
}

// 子组件
class Child extends React.Component{
  render(){
    return(<Text>{this.props.name}</Text>);
  }
}

父组件向子组件传递 name="name" 的 props 属性，在子组件中使用 this.props.name 引用此属性。

属性类型 prop type 和默认属性 default prop 可以通过类中的 static 来声明：

class Demo extends React.Component {
   // 默认props
  static defaultProps = {
  autoPlay: false,
  maxLoops: 10,
  }
   // propTypes用于验证转入的props，当向 props 传入无效数据时，JavaScript 控制台会抛出警告
  static propTypes = {
  autoPlay: React.PropTypes.bool.isRequired,
  maxLoops: React.PropTypes.number.isRequired,
  posterFrameSrc: React.PropTypes.string.isRequired,
  }
  state = {
  loopsRemaining: this.props.maxLoops,
  }
}

state 属性

组件用来改变自己状态的属性，通常使用 setState({key:value}) 来改变属性值触发界面刷新，不能使用 this.state.xxx 来直接改变。在开发中，一般不会在定时器函数（setInterval、setTimeout等）中来操作state。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。

对于经常改变的数据且需要刷新界面显示，可以使用state。对于不需要改变的属性值可以使用props。React Native建议由顶层的父组件定义state值，并将state值作为子组件的props属性值传递给子组件，这样可以保持单一的数据传递。

生命周期

我们把组件从 装载 ，到 渲染 ，再到 卸载 当做一次生命周期，也就是组件的生存状态从 装载 开始到 卸载 为止，期间可以根据属性的变化进行多次渲染。生命周期的三种状态：

Mounting：装载 1.componentWillMount() 2.componentDidMount()
Updating：渲染 1.componentWillReceiveProps() 2.shouldComponentUpdate() 3.componentWillUpdate() 4.componentDidUpdate()
Unmounting：卸载 componentWillUnmount()

componentWillMount()，组件开始装载之前调用，在一次生命周期中只会执行一次。  
componentDidMount()，组件完成装载之后立即调用，在一次生命周期中只会执行一次。在这里开始就可以对组件进行各种操作了，比如在组件装载完成后要显示的时候执行动画。  
componentWillUpdate(object nextProps, object nextState)，当新的props或者state被接受时,组件属性更新之前调用,这个方法不会被初始渲染调用。不能在这个方法里使用 this.setState()。如果你要响应一个prop变化来更新state,使用componentWillReceiveProps 来替代。
componentDidUpdate(object prevProps, object prevState)，组件属性更新之后调用，每次属性更新都会调用，这个方法不会被初始渲染调用。   
componentWillUnmount()，组件卸载之前调用，在这个方法里执行一些必要的清理操作,比如timers。

组件属性更改时会调用以下方法，在一次生命周期中可以执行多次：

componentWillReceiveProps(object nextProps)，已加载组件收到新的props时被调用.这个方法不会为最初的渲染调用。
shouldComponentUpdate(object nextProps, object nextState)，组件判断是否重新渲染时调用，当新的props或者state被收到,在渲染前被调用.这个方法不会在最初的渲染被调用。

并没有类似的 componentWillReceiveState () 的方法。一个即将到来的 prop 转变可能会导致一个 state 变化,但是反之不是。如果你需要实现一个对 state 变化相应的操作，使用 componentWillUpdate() 。

如果 shouldComponentUpdate() 返回 false，render() 会在下次 state 变化前被完全跳过。另外 componentWillUpdate() 和 componentDidUpdate() 将不会被调用。

默认情况下shouldComponentUpdate() 总是返回 true 来阻止当 state 突变时的细微bug。

页面跳转

初始化第一个页面：

  import SeatPageComponent from './SeatPageComponent';
import MainPageComponent from './MainPageComponent';
import TrainListComponent from './TrainListComponent';

class MainPage extends React.Component {
  render() {
    let defaultName = 'MainPageComponent';
    let defaultComponent = MainPageComponent;
    return (
      <Navigator
        // 指定默认页面
        initialRoute={{ name: defaultName, component: defaultComponent }}
        // 配置页面间跳转动画
        configureScene={(route) => {
          return Navigator.SceneConfigs.VerticalDownSwipeJump;
        }}
        // 初始化默认页面
        renderScene={(route, navigator) => {
          let Component = route.component;
          // 将navigator作为props传递到下一个页面
          return <Component {...route.params} navigator={navigator} />
        }} />
    );
  }
}

跳转到下一页面：

  jumpToNext(){
    const { navigator } = this.props;// 由上一个页面传递过来
    if(navigator) {
      navigator.push({
        name: 'SeatPageComponent',
        component: SeatPageComponent,// 下一个页面
      });
    }
}

返回上一个页面：

   _back(){
   const { navigator } = this.props;
   if(navigator) {
     navigator.pop();
   }
 }

页面间通信

例如：从A页面打开 B 页面 A 通过 route.params 将参数传递给 B：

  jumpToNext(){ 
  const { navigator } = this.props;// 由上一个页面传递过来
  if(navigator) { 
    navigator.push({ 
      name: 'SeatPageComponent', 
      component: SeatPageComponent,// 下一个页面 
      params: { // 需要传递个下一个页面的参数,第二个页面使用this.props.xxx获取参数
        id: 123,
        title: this.state.title, 
      },
    });
   }
}

A 通过 route.params 传递回调方法或者 A 的引用来让 B 将数据传回给 A：

  // A页面
jumpToNext(){ 
  const { navigator } = this.props;// 由上一个页面传递过来
  if(navigator) { 
    let that = this;// this作用域，参见下文函数绑定
    navigator.push({ 
      name: 'SeatPageComponent', 
      component: SeatPageComponent,// 下一个页面 
      params: { // 需要传递个下一个页面的参数,第二个页面使用this.props.xxx获取参数
        title: '测试',
        getName: function(name) {that.setState({ name: name })}
      },
    });
   }
}

// B页面
 _back(){
   const { navigator } = this.props;
   if(this.props.getName){
     this.props.getName('测试');
   }
   if(navigator) {
     navigator.pop();
   }
 }

flexbox 布局

什么是 flexbox 布局

React 中引入了 flexbox 概念，flexbox 是属于 web 前端领域 CSS 的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。 RN 利用 flexBox 模型布局，也就是在手机屏幕上对组件进行排列，利用 flexBox 模型，开发者可以开发出动态宽高的自适应的 UI 布局。

flexbox 中的样式主要有以下几类

位置及宽、高相关的样式键
容器属性，决定子组件排列规则的键
元素属性，决定组件显示规则的键
边框、空隙与填充

布局样式

position relative （默认）表示当前描述的位置是相对定位，不可以使用 bottom 和 right 。 top 和 left 表示当前组件距离上一个同级组件的最上(左)距离 absolute 表示当前描述的位置是绝对定位， top 、 bottom 、 left 、 right ，描述当前组件的位置距离父组件最（上下、左、右)的距离
width width 、 height 、 maxHeight 、 maxWidth 、 minHeight 、 minWidth 组件的宽和高是可以动态改变的,所以可以设置宽和高的最大和最小值
flexDirection row ：横向排列，主轴为水平方向； ?column ：竖直排列，主轴为垂直方向。
flexWrap wrap 和 nowrap （默认值），当水平或垂直布局时，如果子 View 放不下可选 wrap 实现自动换行
justifyContent 子布局在主轴方向位置 enum( flex- start , flex-end , center , space-between , space-around )
alignItems 子布局在侧轴方向位置 enum( flex-start , flex-end , center , stretch )
flex 权重，默认值是0当它的值为1时，子组件将自动缩放以适应父组件剩下的空白空间。
alignSelf 忽略它的父组件样式中的 alignItems 的取值，而对该组件使用 alignSelf 键对应的规则。 enum( auto , flex-start , flex-end , center , stretch )
padding
margin