React Native 狗狗说初步搭建

****本人个人交流群：479369972（React Native交流群）495807302（Vue.js技术栈），不懂问我****

---

前几天做了一个案例----狗狗说（慕课网），由于原视频比较采用react native 0.22版本，好多东西都不匹配，查阅一下资料，把其中的坑给大家说一下：

---

1.首先我们来进新建项目

由于国内npm被墙，所以我们一般都是通过淘宝镜像来进行项目的安装：

$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

备注：一般情况下，淘宝是每隔10分钟和npm官方数据进行一次同步，所以我们可以尽管大胆的使用，如果你还想要其他的一些镜像，请访问

淘宝NPM镜像

然后我们来进行项目的创建(本文章以Mac为例)：

打开我们终端，或者运行

$ react-native init myApp

然后等待项目慢慢安装，安装完成后，我们

  $ cd myApp  

进入项目文件夹，然后执行命令

 $ react-native run-ios    

运行项目

备注：由于现在RN的最新版本是0.42,版本更新速度特别快，有些对新版本不熟悉的情况下，可以安装具体的某一个版本，方法如下：

---

2.安装react native过去的某个版本

但是不鼓励安装过旧的版本（例如：0.22），一是语法和现在差异过大，第二是版本官方已经不给予维护

如果想进行react native版本的升级或者降级，可以参考：

升级react native版本

不建议降级

---

3.编写TabBar

我们做的第一件事情就是编写一个TabBar，首先为了方便维护，我们新建一个Main.js作为项目的主要入口文件，同时修改index.ios.js文件如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';

import Main from "./Main";

export default class imoocApp extends Component {
  render() {
    return (
      <Main/>
    );
  }
}

AppRegistry.registerComponent('imoocApp', () => imoocApp);

同时编写Main文件如下：

/**
 * Created by MacBook on 2017/3/14.
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  TabBarIOS,
  Text,
  View,
  NavigatorIOS
} from 'react-native';

var Icon = require('react-native-vector-icons/Ionicons');

var List = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text>列表页面</Text>
      </View>
    )
  }
});

var Edit = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text>录制页面</Text>
      </View>
    )
  }
});

var Account = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text>账户中心</Text>
      </View>
    )
  }
});

var TabBarExample = React.createClass({
  getInitialState: function() {
    return {
      selectedTab: 'blueTab',
      notifCount: 0,
      presses: 0,
    };
  },

  render: function() {
    return (
      <TabBarIOS tintColor="#ee735c">
        <Icon.TabBarItem
          title="视频"
          iconName='ios-videocam-outline'
          selectedIconName='ios-videocam'
          selected={this.state.selectedTab === 'list'}
          onPress={() => {
            this.setState({
              selectedTab: 'list',
            });
          }}>
          <List/>
        </Icon.TabBarItem>
        <Icon.TabBarItem
          iconName='ios-recording-outline'
          selectedIconName='ios-recording'
          title="录制"
          selected={this.state.selectedTab === 'edit'}
          onPress={() => {
            this.setState({
              selectedTab: 'edit',
            });
          }}>
          <Edit/>
        </Icon.TabBarItem>
        <Icon.TabBarItem
          iconName='ios-more-outline'
          selectedIconName='ios-more'
          title="更多"
          selected={this.state.selectedTab === 'more'}
          onPress={() => {
            this.setState({
              selectedTab: 'more',
            });
          }}>
          <Account/>
        </Icon.TabBarItem>
      </TabBarIOS>
    );
  },
});

const styles = StyleSheet.create({
  container:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  tabText: {
    color: 'white',
    margin: 50,
  },
});

module.exports = TabBarExample;

这里我们对官网的TabBarIOS进行了一次改进，同时引入了一个第三方插件：

react-native-vector-icons

具体方法如下：

sudo npm install react-native-vector-icons --save (回车)

sudo npm install rnpm -g

rnpm link (回车)

到这里还不算，我们还要打开我么你的Xcode将项目添加到IOS项目中的Libraries中，如图：

到这里我们就看到了我们期待已久的界面了，如图：

---

到此为止，狗狗说的基本架构我们就搭建出来了，明天我为大家更新下一步的操作

我们接着昨天的说，来开始进行下一部分工作，昨天我们基本上把基本框架模拟出来了，今天用我们来把三个tab，分别封装成三个子页面：

结构如下：

首先我们新建一个文件夹，承载我们的APP文件，名为app，同时由于我们本软件有三个大模块，第一模块为creation，第二模块为edit，第三模块为account，我们在三大模块下分别建立index.js文件，同时输入代码如下：

同时修改主界面代码Main.js中声明的三个子页面如下：

好了，到此我们就完成了狗狗说基本框架的改进，仅供大家参考。