这里我们已经可以获取到当前登录的用户资料了，它会在组件的 user 这个状态里面 .. 下面我们可以去显示这个资料里面的几个项目 .. 比如用户的头像 .. 用户名 .. 还有用户的描述 ..

打开 UserProfile.js .. 找到组件的 render 方法 .. 去掉里面的东西 .. 然后用一组 View 组件 .. 上面加上点样式 .. 一个是 styles.container .. 再用点行内样式 .. 添加一个 flexDirection .. 设置成 column .. 再添加一个 paddingTop .. 值设置成 160 ..

这个 View 里面又包装了一组 View .. 在这个 View 上面再添加点样式 ... 用一个 flex .. 设置成 1 .. 再用一个 alignSelf .. 设置成 center ...

在这个 View 里面，用一个 Image 组件 .. 去显示用户的头像 .. 添加一个 source ，指定一下图像的位置 .. 用一个 uri 属性 .. 它的值是 user 这个状态里的 large_avatar .. 再用一个 style 属性 .. 添加点样式 .. 用一个 width 设置一下图像的宽度 .. 值设置成 90 .. 再用一个 height .. 值设置成 90 .. 再添加一个 borderRadius .. 设置一下图像的圆角 .. 这里可以使用图像宽度 .. 也就是 90 去除一下 .. PixelRatio.get() .. 这样这个图像会是一个圆形的 .. 在文件的顶部，去把这个 PixelRatio 导入进来 ..

回到 render 方法 .. 继教再添加其它的要显示的东西 .. 用一个 Text 组件 .. 加上点样式 .. marginVertical .. 设置成 15 .. 再用一个 fontSize .. 设置一个字号 .. 值是 18 .. 再添加一个 textAlign .. 把文字的对齐方式设置成 center ..

要显示的文字是在 user 状态里面的 name 这个属性的值 ...

最后再去显示一个用户的描述 .. 用一组 Text .. 添加点样式 .. 先设置一下文字的颜色 .. 用一个 color .. 值是 rgba .. 黑色 .. 再添加一个不透明度 ..

再用一个 marginBottom .. 添加一点底部的外边距 . 设置成 10 .. 最后再设置一下文字的对齐 .. textAlign .. 设置成 center .. 让它居中显示 ..

要显示的文字是在 user 这个状态里面的 desc 这个属性的值 ...

现在，在这个我的档案页面上，会显示出当前登录的用户的相关的资料 .. 用户的头像 .. 用户名 .. 还有用户的描述 ...