react-native screen 組成

// TODO: 引入三方依賴
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { SafeAreaView, View, FlatList, RefreshControl } from 'react-native';

// TODO: 引入自定義組件
import XXX from '../../components/xxx';

// TODO: 引入自定義方法
import { xxx } from '../../util/common';
import { fetchOldWineList } from '../../action/oldWine/list';

// TODO：引入樣式文件
import styles from '../../css/xxx/xxx';

// TODO: 頁面構成
class MyComponent extends Component {
	// TODO: navigation 配置
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			...navigationOptions,
			headerTitle: 'xxx'
		};
	};

	constructor(props) {
		super(props);
		this.state = {
			xxx: []
		};
		// TODO:靜態變量
		this.xxx = '';
	}
	
	// TODO: 自定義方法
	fun1() {
	
	}

	fun2() {
	
	}
	
	// TODO:週期 componentDidMount
	// TODO:頁面加載完成觸發且只有一次
	componentDidMount() {
		// code...
	}

	// TODO:週期 componentWillReceiveProps
	// TODO:用以處理請求之後的數據和父組件數據的變化，而觸發頁面更新
	componentWillReceiveProps(nextProps) {
		// code...
	}
	
	// TODO:週期 componentWillUnmount
	// TODO:頁面卸載前需要處理的業務邏輯(監聽函數解綁、清空定時器等)
	componentWillUnmount() {
		// code...
	}

	// 渲染頁面
	render() {
		return (
			{/* 必選 頁面固定結構 SafeAreaView 以及 style */}
			<SafeAreaView style={styles.safeArea}>
				{/* 可選 頁面固定結構 container style 處理頁面左右邊距15 */}
				<View style={styles.container}></View>
				{/* 可選 頁面固定結構 ScrollView 以及 style 處理頁面內容超出一屏不顯示情況 */}
				<ScrollView style={styles.scrollView}></ScrollView>
			</SafeAreaView>
		);
	}
}

// TODO: 頁面關聯 頂級組件 從而使用 store
// TODO: 映射本頁面相關的數據，以避免不必要的頁面render
export default connect(store => ({
	xxx: store.xxx
}))(MyComponent);