入门react-native——组件

最新推荐文章于 2025-03-14 14:53:43 发布

原创最新推荐文章于 2025-03-14 14:53:43 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

RN 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了在React Native中如何使用ES6类和函数式组件定义和引用组件，包括组件属性的传递与使用，为初学者提供了清晰的实践指南。

一、React-navtive 组件
1、通过ES6方式定义组件
定义组件:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
export default class HelloComponent extends Component
{
render(){
return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text>
}
}
引用组件:
import HelloComponent from './HelloComponent';
<View style={styles.container}>
<HelloComponent/>
</View>
引用组件属性:
return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello{this.props.name}</Text>
2、函数式定义组件(无状态，无法使用this指针)
定义方式:
function HelloComponent()
{
return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello Function Component</Text>
}
//导出方式
module.exports=HelloComponent;
函数式组件的props属性使用
一、声明属性
<View style={styles.container}>
<HelloComponent name="小明"/>
</View>
二、调用组件属性
function HelloComponent(props)
{
return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello {props.name}</Text>
}