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,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 中，如图：

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

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

原文地址：https://www.jb51.cc/react/304559.html

React Native 狗狗说从搭建到上线一

相关推荐