React Native -- 创建组件的三种方式

  • Z时代
  • 2024-01-10
  • 分类：综合

react

1. React Native 创建组件的方式

React Native 创建组件有三种方式，分别是：

  1. ES6 创建组件 （ 推荐 ）

  2. ES5 创建组件

  3. 函数式定义的无状态组件

下面分别讲下。

2. 创建组件

创建一个 HelloComponent.js 文件，写入组件。并在 App.js 中调用 HelloComponent 组件。

App.js 代码如下：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import HelloComponent from './HelloComponent';
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <HelloComponent/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF'
  }
});

在 HelloComponent.js 文件中分别使用三种方式创建组件：

方式一：ES6 创建组件 （ 推荐 ）

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
/**
 * 方式一：ES6
 * 推荐
 * 新建一个类，并导出
 */
 export default class HelloComponent extends Component {
   render() {   //页面渲染
     return <Text style={{fontSize:20, backgroundColor:'red'}}>Hellow</Text>
   }
 }

效果图：

方式二：ES5 创建组件

 /**
  * 方式二：ES5
  * ES5 和 ES6 都需要 render 来渲染页面
  * 区别在于 ES5 需要单独导出组件
  */
var HelloComponent=React.createClass({
  render() {  //页面渲染
      return <Text style={{fontSize:20, backgroundColor:'red'}}>Hellow</Text>
    }
})
//导出组件
module.exports=HelloComponent;

效果同方式一

ES5 和 ES6 区别：

  • 相同点：

    都需要 render 来渲染页面

  • 不同点：

    区别在于 ES5 需要单独导出组件

方式 三：函数式定义

/**
 * 方式三：函数定义
 * 无状态，不能使用this
 * 没有生命周期方法
 */
function HelloComponent() {
  return <Text style={{fontSize:20, backgroundColor:'red'}}>Hellow</Text>
}
module.exports=HelloComponent;

效果同方式一

3. 访问属性

在 App.js 中的 HelloComponent 组件中传入值 name：

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <HelloComponent
          name='小明'
        />
      </View>
    );
  }
}

3.1 在无状态组件里访问属性：

在 HelloComponent 组件中调用：

function HelloComponent(props) {
  return <Text style={{fontSize:20, backgroundColor:'red'}}>Hellow.{props.name}</Text>
}
module.exports=HelloComponent;

效果如下：

3.2 在 ES6 里访问属性：

ES6 通过 this 访问属性

export default class HelloComponent extends Component {
   render() { 
     return <Text style={{fontSize:20, backgroundColor:'red'}}>Hellow.{this.props.name}</Text>
   }
 }

以上是 React Native -- 创建组件的三种方式 的全部内容， 来源链接： utcz.com/z/381114.html

回到顶部