ReactNative实战之社交网络客户端（一：基础篇）

.
├── App.js	// 项目路由配置，因为我这个项目需要登陆，所以我就根据登陆/未登陆，定义了两个路由入口
├── LICENSE	// 证书
├── README.md	// 介绍文档
├── android	// 原生Android工程
├── app.json // 用来配置原生App需要的基本信息
├── index.js // 入口文件
├── ios // 原生iOS工程
├── node_modules // 依赖项目的源代码
├── package.json // 定义项目所需要的各种依赖/模块，以及项目的配置信息
├── preview // App预览图
├── rn-cli.config.js // 顾名思义，是命令行工具：react-native的配置信息
├── src // 项目源代码。你写的业务代码基本都在这里
    ├── Main.js // 配置了“登陆”状态下各页面的路由信息
    ├── SignedOutNavigator.js // 配置了“未登陆”状态下各页面的路由信息
    ├── assets // 会被RN打包工具打包的静态资源
    ├── pages // App的页面级文件
    │   ├── About.js // 关于页面
    │   ├── Auth.js // 授权认证页面（Mastodon客户端登录时不是常规的账号密码登录，而是输入账号密码然后弹出授权认证，想想微信的授权认证）
    │   ├── BlockedUsers.js // 被屏蔽用户页面
    │   ├── Envelope.js // 私信页面
    │   ├── FollowRequestList.js // 关注请求页面
    │   ├── Followers.js // 关注者页面
    │   ├── Following.js // 关注页面
    │   ├── Home.js // 首页
    │   ├── Launcher.js // 启动页面，从存储系统中加载主题、用户Token等基础数据
    │   ├── Login.js // 登陆页面，即输入账号密码的地方
    │   ├── MutedUsers.js // 被隐藏用户页面
    │   ├── Notifications.js // 消息通知页面
    │   ├── OpenSource.js // 开源声明页面，列出了项目所有用到的开源软件及开源协议
    │   ├── Profile.js // 个人详情页面
    │   ├── Search.js // 搜索页面
    │   ├── SendToot.js // 发送嘟文（类似于微博的博文）的页面
    │   ├── SideBar.js // 主页侧栏组件
    │   ├── Tag.js // 标签页面
    │   ├── Test.js // 测试页面，开发项目时需要测试某模块时可以在这个页面单独测试
    │   ├── TootDetail.js // 嘟文详情页面
    │   ├── common // 项目中会多处使用的公共组件
    │   │   ├── Context.js // 评论组件
    │   │   ├── DefaultTabBar.js // Tab组件的顶部Bar组件
    │   │   ├── Divider.js // 分割线组件
    │   │   ├── Fab.js // Floating Action Button (FAB)组件，一般是漂浮在右下角的那个圆形按钮
    │   │   ├── HTMLView.js // 把渲染HTML的部分提取出来，自成一个组件
    │   │   ├── Header.js // 顶部的Header组件
    │   │   ├── ListFooterComponent.js FlatList组件的尾部组件
    │   │   ├── Loading.js // Loading加载效果组件
    │   │   ├── MediaBox.js // 媒体文件（图片、视频）展示组件
    │   │   ├── Notice.js // 提示框、确认框等组件
    │   │   ├── ReplyInput.js // 封装的单行、多行输入框组件
    │   │   ├── Spruce.js // 骨架屏组件，自定了几个常用骨架屏
    │   │   ├── TootBox.js // 嘟文组件
    │   │   ├── UserItem.js // 用户列组件
    │   └── screen // Tab组件下的页面
    │       ├── HomeScreen.js // 主页时间轴Tab下的组件
    │       ├── LocalScreen.js // 本站时间轴Tab下的组件
    │       ├── MediaScreen.js // 媒体文件Tab下的组件
    │       ├── PublicScreen.js // 跨站公共时间轴Tab下的组件
    │       └── TootScreen.js // （个人详情页面下）个人嘟文Tab下的组件
    └── utils // 放置一些公共方法
        ├── api.js // 定义用到的所有接口
        ├── color.js // 统一管理项目颜色
        ├── config.js // 配置信息，如开发时使用的Token
        ├── locale.js // 国际化文件，目前只有中文的时间字符，未来会集成所有的国际化数据
        ├── mobx.js // 项目全局状态管理中心
        ├── request.js // 封装axios，增加全局请求、响应拦截器
        └── store.js // 封装AsyncStorage：本地存储系统
└── yarn.lock // yarn为了跨机器安装得到一致的结果而生成的文件

componentDidMount() {
	this.init(this.props.navigation.getParam('data'))
}

componentWillReceiveProps({ navigation }) {
	this.init(navigation.getParam('data'))
}

import axios from 'axios'
import { Toast } from 'teaset'

const service = axios.create({
  baseURL: 'https://cmx.im', // 统一Host
  timeout: 10000 // 请求超时时间限制
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 如果未来需要增加统一Header，加在这里
    return config
  },
  err => {
    Promise.reject(err)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 如果你需要对接口返回的数据特殊处理一下的话，写在这里  
    return response.data
  },
  err => {
    console.log('拦截器err:', err)
    if (err && err.error) {
      // 服务器异常，统一展示出来
      Toast.message(err.error)
    }

    return Promise.reject(error)
  }
)

export default service