React Native -- 建立元件的三種方式
阿新 • • 發佈:2018-12-17
1. React Native 建立元件的方式
React Native 建立元件有三種方式,分別是:
- ES6 建立元件 ( 推薦 )
- ES5 建立元件
- 函式式定義的無狀態元件
下面分別講下。
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>
}
}