4、React Native开发：布局与组件构建实战

React Native开发：布局与组件构建实战

1. 使用Flexbox创建个人资料页面

在这个部分，我们将学习如何使用Flexbox创建一个个人资料页面。Flexbox是一种强大的布局模型，能帮助我们轻松地实现各种布局效果。

1.1 准备工作

首先，使用React Native CLI创建一个名为SimpleLayout的空应用。同时，准备一些图标和一张用户个人资料图片，可以使用自己的资源，也可以下载相关素材。

1.2 具体实现步骤

1. 在项目根目录下创建一个src文件夹，并在其中创建MainApp.js文件。在该文件中导入必要的依赖和组件，以及个人资料图片和图标：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
} from 'react-native';
const profileImage = require('./images/user-profile.jpg');
const friendsIcon = require('./images/profile.png');
const favIcon = require('./images/plain-heart.png');
const msgIcon = require('./images/chat.png');

2. 创建一个类MainApp，在类的状态中存储用