快速開始

要開始使用React Navigation，您只需安裝 react-navigation npm包

npm install --save react-navigation
yarn add react-navigation

要開始使用React Navigation，您必須創建一個導航器。 React導航帶有三個默認導航器。

• StackNavigator- 為app中的屏幕到堆棧最頂層轉場提供了過度途徑。
• TabNavigator- 用於設置具有多個選項卡的屏幕。
• DrawerNavigator- 用於設置抽屜導航屏幕。

創建一個 StackNavigato

StackNavigator的是最常見的導航形式，所以我們將它作為基本的演示。

import { StackNavigator } from ‘react-navigation‘;
const RootNavigator = StackNavigator({
});
export default RootNavigator;

然後，我們可以添加屏幕到這個StackNavigator。 每個鍵代表一個屏幕。

import React from ‘react‘;
import { View, Text } from ‘react-native‘;
import { StackNavigator } from ‘react-navigation‘;

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Home Screen</Text>
  </View>
);

const DetailsScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Details Screen</Text>
  </View>
);

const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
});

export default RootNavigator;
 

不要在RootNavigator 添加父級,例如:

import {
  RootNavigator
} from ‘./app/index.js‘;

export default class App extends Component < {} > {
  render() {
    return (
      <View>
        <RootNavigator></RootNavigator>
      </View>
    );
  }
}
會出現錯誤

現在我們給導航頭增加一個標題；

const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      headerTitle: ‘Home‘,
    },
  },
  Details: {
    screen: DetailsScreen,
    navigationOptions: {
      headerTitle: ‘Details‘,
    },
  },
});

export default RootNavigator;
 

Creating a TabNavigator

要開始使用TabNavigator首先導入並創建一個新的RootTabs組件。

import React from ‘react‘;
import { View, Text } from ‘react-native‘;
import { TabNavigator } from ‘react-navigation‘;

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Home Screen</Text>
  </View>
);

const ProfileScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Profile Screen</Text>
  </View>
);

const RootTabs = TabNavigator({
  Home: {
    screen: HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
});

export default RootTabs;

現在讓我們為標簽欄設置一個標簽和圖標。

我們將在示例中使用 react-native-vector-icons
如果你沒有安裝在你的項目中安裝。
如果你沒有安裝成功react-native-vector-icons 可以嘗試(RN+0.52.1 react=16.2.0)

rm node_modules/react-native/local-cli/core/fixtures/files/package.json

rnpm link react-native-vector-icons

這將確保tabBarLabel是一致的（使用嵌套的導航器時很重要），它將設置一個tabBarIcon。 這個圖標默認情況下會在iOS上默認顯示，因為它使用了標簽欄組件，與Android上的標準設計模式一致。

Creating a DrawerNavigator

要開始使用TabNavigator首先導入並創建一個新的RootTabs組件。

import { DrawerNavigator } from ‘react-navigation‘;

const RootDrawer = DrawerNavigator({

});

export default RootDrawer;

現在我們創建DrawerNavigator

import React from ‘react‘;
import { View, Text } from ‘react-native‘;
import { DrawerNavigator } from ‘react-navigation‘;

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Home Screen</Text>
  </View>
);

const ProfileScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Profile Screen</Text>
  </View>
);

const RootDrawer = DrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
});

export default RootDrawer;

簡介

React Navigation-(Qucik Start)快速開始