如何安装Gatsby @ 2(beta)

时间:2018-07-03 09:33:54

标签: gatsby

如何安装Gatsby @ v2?我关注了https://next.gatsbyjs.org/docs/上的文档,该文档应该是新版本的文档。它说要运行npm install --global gatsby-cli。但是此命令将安装版本1。如何安装第二个版本?

2 个答案:

答案 0 :(得分:3)

如果您想从头开始一个新项目,可以这样做

app.Screenshot("name");

然后使用Yarn安装Gatsby和React库:

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

import BottomNavigation, {
  FullTab,
} from 'react-native-material-bottom-navigation';

import {
  StackActions,
  NavigationActions,
  createStackNavigator,
} from 'react-navigation';

import Explore from './Components/Explore';
import Cerca from './Components/Cerca';
import Profilo from './Components/Profilo';

const AppNavigator = createStackNavigator({
  Explore: {
    screen: Explore,
  },
  Cerca: {
    screen: Cerca,
  },
  Profilo: {
    screen: Profilo,
  },
});

export default class App extends Component {
  tabs = [
    {
      key: 'Explore',
      icon: 'compass',
      label: 'Explore',
      barColor: '#388E3C',
      pressColor: 'rgba(255, 255, 255, 0.16)',
    },
    {
      key: 'Cerca',
      icon: 'search-web',
      label: 'Cerca',
      barColor: '#4589F2',
      pressColor: 'rgba(255, 255, 255, 0.16)',
    },
    {
      key: 'Profilo',
      icon: 'account-circle',
      label: 'Profilo',
      barColor: '#E64A19',
      pressColor: 'rgba(255, 255, 255, 0.16)',
    },
  ];

  renderIcon = icon => ({ isActive }) => (
    <Icon size={24} color="white" name={icon} />
  );

  renderTab = ({ tab, isActive }) => (
    <FullTab
      isActive={isActive}
      key={tab.key}
      label={tab.label}
      renderIcon={this.renderIcon(tab.icon)}
    />
  );

  handleTabPress = newTab => {
    this.navigator &&
      this.navigator.dispatch(
        StackActions.reset({
          index: 0,
          actions: [NavigationActions.navigate({ routeName: newTab.key })],
        })
      );
  };

  render() {
    return (
      <View>
        <AppNavigator
          ref={nav => {
            this.navigator = nav;
          }}
        />
        <BottomNavigation
          activeTab={this.navigator.state.routeName}
          renderTab={this.renderTab}
          tabs={this.tabs}
          onTabPress={this.handleTabPress}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({});

要检查您是否正在使用Gatsby的版本2,请打开项目文件夹中的$ mkdir my-new-app $ cd my-new-app/ 文件,您应该看到类似以下内容的

$ yarn init -y
$ yarn add gatsby@next react react-dom

要在终端中将Gatsby CLI更新到版本2,请执行以下操作:

package.json

然后通过以下方式检查CLI版本

"dependencies": {
  "gatsby": "^2.0.0-beta.16",
  "react": "^16.4.1",
  "react-dom": "^16.4.1"
}

Gatsby CLI版本不是Gatsby库版本,$ npm install --global gatsby-cli@2.0.0-beta.3 可能会或可能不会为您提供所需的最新版本,因此始终最好检查$ gatsby -v 来验证Gatsby版本< / p>

答案 1 :(得分:2)

盖茨比2.0当前被标记为next,因此您需要运行npm install --global gatsby-cli@next

此外,如果通过运行gatsby -v运行which gatsby或通过运行where gatsby还可以检查$ PATH中所有找到的bin,则使用哪个bin文件。无论这些命令返回的路径如何,请删除bin文件(例如rm /usr/local/bin/gatsby或类似的文件),然后再次运行npm install --global gatsby-cli@next