Mac搭建 React Native 工具篇Atom＋Nuclide

关于如何在mac下搭建React环境这里就不详细介绍了，有兴趣的朋友可以看：在Mac上搭建RN基础环境，今天要说的是如何在mac下使用Atom＋Nuclide组合环境来开发项目。

安装Atom

如果没有的大家可以到官网下载：https://atom.io/，也可以到国内的镜像地址下载：https://npm.taobao.org/mirrors/atom/1.7.2/

解压atom，打开atom，你看到的界面应该是这样的。

安装Nuclide

安装Nuclide插件有两种方式。

1.图形化安装：

点击菜单栏：Atom->Preferences,或者可以”Command+,”，或者快捷键打开。然后，在Install Packets的输入框中，输入nuclide，出现的第一个就是我们想要安装的，点击install 。

安装完成之后，在工具栏多了一个Nuclide栏。

默认安装nuclide之后，会安装一大堆的依赖包，如果没有默认安装这些依赖包，可以选中,Packages->Settings View->Manage Packets

搜索nuclide，再nuclide package上双击，进入设置，勾选Install recommended packets on startup 。

最后重启atom，就可以看到nuclide插件了。

命令行安装：

安装命令，对应的githttps://github.com/atom/apm：

apm install nuclide

命令行安装完成后，打开Atom，选择Packages->Settings View->Manage Packets ，然后选择Packages，Nuclide中点击Settings。

勾选Install recommended packets on startup 。

在Nuclide运行项目

第一步，运行react native packager。点击 command + shift + p打开command palette（打开终端选项），然后输入：

react native start

选择Nuclide React Native :Start packager。

当然我们也可以使用Nuclide的图形化界面。

注：常见错误：

/Users/huangwenchen/Desktop/Demo/node_modules/react-native/local-cli/cli.js:123
class CreateSuppressingTerminalAdapter extends TerminalAdapter {
^^^^^
SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

说明你node的版本太低,运行以下命令更新。

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

第二步，终端运行项目。 cd到项目目录，执行。

$ react-native run-ios
$ react-native run-android

navigator实例

首先先来看一下效果图。

导入react-native-tab-navigator框架，在项目目录下：

npm install react-native-tab-navigator –save

然后在项目中引入：

import TabNavigator from 'react-native-tab-navigator';

完整代码：

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

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

export default class Shop extends Component {

  constructor(props) {
          super(props);
          this.state={
              selectedTab:'home'//默认选中home
          }
      }

  render() {

    var homeView=(
                <View style={[styles.flex,styles.center,{backgroundColor: '#ffff0044'}]}>
                    <Text style={{fontSize: 30}}>首页</Text>
                </View>
            );
            var settingView=(
                <View style={[styles.flex,styles.center,{backgroundColor: '#ffff0044'}]}>
                    <Text style={{fontSize: 30}}>设置</Text>
                </View>
            );

    return (

         <TabNavigator
               tabBarStyle={{ height: 70 }}
           >
               <TabNavigator.Item
                   selected={this.state.selectedTab === 'home'}
                   title="首页" //Tab文字
                   renderIcon={() => <Image style={styles.img} source={require('./image/tab_message_n.png') }/>}//默认图标
                   renderSelectedIcon={() => <Image style={styles.img} source={require('./image/tab_message_n.png') }/>}//选中图标
                   badgeText="9+"//消息数目
                   onPress={() => this.setState({ selectedTab: 'home' })}
               >
                   {homeView}
               </TabNavigator.Item>
               <TabNavigator.Item
                   selected={this.state.selectedTab === 'setting'}
                   title="设置"
                   renderIcon={() => <Image style={styles.img} source={require('./image/tab_mine_n.png') }/>}
                   renderSelectedIcon={() => <Image style={styles.img} source={require('./image/tab_mine_p.png') }/>}
                   onPress={() => this.setState({ selectedTab: 'setting' })}
               >
                   {settingView}
               </TabNavigator.Item>
           </TabNavigator>
    );
  }
}

const styles = StyleSheet.create({
  flex:{
        flex:1,
    },
    center:{
        justifyContent:'center',
        alignItems:'center'
    },
    img: {
        width: 45,
            height: 35,
    },
});

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

注：项目所用的图片放在image/*下。