react-native screen 组成

最新推荐文章于 2025-06-11 09:17:40 发布

老愚公

最新推荐文章于 2025-06-11 09:17:40 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： react react-native rn

本文链接：https://blog.csdn.net/weixin_38173313/article/details/98731719

本文详细介绍了一个基于React Native的应用构建过程，涵盖了组件创建、状态管理、页面布局及样式设定。通过与Redux结合，实现了数据流的高效管理和页面的响应式更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 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);