Taro 框架 React Native 开发

1、生命周期

参考：React Native组件（一）组件的生命周期_reactnative constructor介绍-CSDN博客

1.1构造函数(constructor)

1、第一个语句必须是super(props)。

2、contructor将在任意一个RN组件被加载之前优先调用，并且只会调用一次。

3、该函数最大的作用是定义该组件当中需要使用的状态机变量 。

constructor(props) {
    super(props);
    this.myProperty1 = 'test';
    this.myProperty2 = true;
    this.state = {//定义状态机变量
    inputedNum: '',
    inputedPW: ''
    };
    this.updatePW = this.updatePW.bind(this);
    this.jumpToWaiting = this.jumpToWaiting.bind(this);
}

1.2构造函数(constructor)

React Native 的组件生命周期可以被划分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。以下是每个阶段的关键方法：

挂载阶段：constructor()、componentWillMount()、render()、componentDidMount()

更新阶段：componentWillReceiveProps(nextProps)、shouldComponentUpdate(nextProps, nextState)、componentWillUpdate(nextProps, nextState)、render()、componentDidUpdate(prevProps, prevState)

卸载阶段：componentWillUnmount()

import React, { Component } from 'react';
import { Text, View } from 'react-native';
 
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    console.log('Component is being constructed');
  }
 
  componentWillMount() {
    console.log('Component is about to be mounted');
  }
 
  componentDidMount() {
    console.log('Component has been mounted');
  }
 
  componentWillReceiveProps(nextProps) {
    console.log('Component will receive new props:', nextProps);
  }
 
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Should component update? Current state:', this.state, 'Next state:', nextState);
    // Return true or false based on your logic
    return true;
  }
 
  componentWillUpdate(nextProps, nextState) {
    console.log('Component is about to update. Current state:', this.state, 'Next state:', nextState);
  }
 
  componentDidUpdate(prevProps, prevState) {
    console.log('Component has updated. Previous state:', prevState, 'Current state:', this.state);
  }
 
  componentWillUnmount() {
    console.log('Component is about to unmount');
  }
 
  render() {
    return (
      <View>
        <Text>Counter: {this.state.counter}</Text>
      </View>
    );
  }
}
 
export default MyComponent;

2、页面跳转方式

import Taro from '@tarojs/taro';



handleDetails = () => {
    // Taro.redirectTo({
    //   url: '/pages/home/details/index'
    // })
    Taro.navigateTo({
      url: '/v2/pages/home/details/index'
    })
  }

// ListPage.js
import Taro from '@tarojs/taro'
 
class ListPage extends Taro.Component {
  // 假设这是列表项的点击事件处理函数
  handleItemClick = (itemId) => {
    // 使用Taro的导航方法跳转到详情页面，并将商品ID作为参数传递
    Taro.navigateTo({
      url: '/pages/detail/detail?id=' + itemId
    })
  }
 
  render() {
    // 渲染列表项，并绑定点击事件
    return (
      <View>
        {/* 假设这里有一个列表渲染 */}
        <View onClick={() => this.handleItemClick(item.id)}>
          {/* 列表项内容 */}
        </View>
      </View>
    )
  }
}
 
export default ListPage

// DetailPage.js
import Taro from '@tarojs/taro'
 
class DetailPage extends Taro.Component {
  componentWillMount() {
    // 在组件挂载之前，从页面参数中获取商品ID
    const id = this.$route.query.id
    // 这里可以进行数据请求，获取商品详情数据
  }
 
  render() {
    // 渲染商品详情页面
    return (
      <View>
        {/* 商品详情内容 */}
      </View>
    )
  }
}
 
export default DetailPage

taro中跳转页面的几种带参方式_taro页面跳转-CSDN博客