一、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>
}
入门react-native——组件
最新推荐文章于 2019-03-11 21:12:29 发布