图标
先在应用的标签栏上添加一个新的项目 .. 打开它可以显示一个用户资源的页面 .. 用户没登录的话会被重定向到登录的页面上 .. 我们可以先去找一个表示用户的小图标 .. 在 iconfinder 这个网站上,可以搜索一下相关的图标 .. 比如搜索一下 user ..
找一个自己喜欢的小图标 ... 打开它 .. 点击 Base 64 .. 复制一下里面的代码 .. 回到我们的项目 .. 打开 app/Assets 下面的 Icons.js .. 在这个 icons 里面添加一个新的属性 .. 名字是 user .. 它的值就是我们刚才复制的小图标的代码 .. 保存 ..
https://www.iconfinder.com/icons/309035/account_human_person_user_icon#s...
index.ios.js
再打开 index.ios.js .. 在这个 render 方法里面,可以再去添加一个标签项目 ... recti ... 设置一下图标的地址 .. 这里可以使用 icons.user .. 修改一下缩放的比例 .. 改成 3.3 ..
title 标题设置成 我 .. selected 的值设置成 this.state.selectedTab 是不是等于 user ... 点击这个标签的时候,把 selectedTab 的值设置成 user ..
打开这个标签, 我们可以再使用一个组件 .. 比如可以叫它 User .. 在这个文件的顶部,我们再去导入这个组件 ... 导入进来的名字是 User .. 它的位置是在当前目录下的 app 下面的 Components 下面的 User ..
User
下面我们再去创建一下需要用的 User 这个组件 .. 把它放在 app.. Components 目录的下面 .. 名字是 User.js ... 先添加一个基本的组件 (#renf) ... 组件的名字是 User .. 在组件的 render 方法里面,用一个 NavigatorIOS 组件(#recni), 简单的设置的一下 .. initialRouter .. 这个页面的名字是 我的 ... 打开的组件可以使用 UserProfile ,一会儿再去创建这个组件 ..
在这个文件的顶部,先导入组件需要用的一个样式 .. 名字是 styles .. 位置是一级目录下的 Styles 下面的 Main ..
再去导入需要用的 UserProfile .. 导入进来的名字是 UserProfile .. 位置是当前目录下的 UserProfile ...
UserProfile
再去定义一下这个组件 .. 新建一个文件 .. 放在 app .. Components 目录的下面 .. 名字是 UserProfile ...
在这个文件里,同样添加一个基本的 React 组件 .. 组件的名字是 UserProfile .. 在下面可以导出这个 UserProfile ...
在这个组件里面,我们可以判断一下用户的登录状态 .. 如果用户登录了,就显示出用户的相关信息,比如用户的头像,用户名等等,如果没登录的话,可以把用户重定向到登录的页面 ... 登录以后再返回这个页面显示用户相关的信息 ..
这个登录的功能可以放到一个单独的组件里面,名字可以是 Login .. 这里我们先直接使用一下这个组件 .. 在 UserProfile 的 render 方法里面,使用一个 Login ...
在文件的顶部,先导入组件需要用的一个样式 .. 名字是 styles .. 位置是一级目录下的 Styles 下面的 Main ..
再去导入需要用的 Login 这个组件 .. 导入进来的名字是 Login ... 位置是在当前目录下的 Login ..
Login
再去创建一下这个 Login 组件 .. 把它放在 app .. Components 目录的下面,名字是 Login.js .. 在这个文件里先添加一个基本的组件 .. 组件的名字是 Login .. 在文件的底部导出这个组件 ..
然后简单的设置一下组件要显示的内容 .. 用一个 View .. 上面加上 styles.container ,还有 styles.loading 这两个样式 .. 它里面是一个 Text 组件 .. 要显示的文字是 登录页面 ... 在文件的顶部去导入需要用的样式 .. 名字是 styles ... 位置是上一级目录下的 Styles 下面的 Main ...
再保存一下这些文件 ...
打开 我的 标签 ... 在页面上,会显示 Login 组件里的 登录页面 这几个字儿 ...
我们可以把应用默认打开的标签设置成 user ... 在 constructor 方法里面,找到默认的状态 .. 把 selectedTab 的值设置成 user ...