React Navigation指南

一、初步了解React Navigation

React Navigation是由React Native社區所提供的一個用於跨平台應用程序的導航庫。它為Android和iOS設備提供了一致的、原生的導航體驗。它的靈活性使開發人員能夠輕鬆地創建和管理在應用程序中瀏覽的屏幕和標籤。

React Navigation支持多種導航類型，包括堆棧、標籤和抽屜。通過使用Navigator、StackNavigator、TabNavigator和DrawerNavigator組件，可以輕鬆地創建能夠響應路由和導航事件的應用程序。

下面是一個基本的React Navigation示例：


import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

在上面的代碼中，我們定義了一個HomeScreen組件，並使用createStackNavigator函數創建了一個堆棧導航器。堆棧導航器通過push和pop等函數實現了進入和退出屏幕的效果。最後，我們渲染了createStackNavigator返回的組件。

二、React Navigation的使用

1. 使用Stack Navigator

StackNavigator是一種堆棧導航器，通常在具有線性導航結構的應用程序中使用。基本上，StackNavigator是一種導航類型，允許用戶在應用程序的不同屏幕之間穿梭。

下面是一個Stack Navigator的示例：


import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

在上面的代碼中，我們定義了兩個組件：HomeScreen和DetailsScreen。我們使用createStackNavigator函數創建了一個堆棧導航器，並在其參數中指定了兩個屏幕：Home和Details。我們還指定了initialRouteName選項，將首屏渲染為Home屏幕。

要將用戶從一個屏幕導航到另一個屏幕，我們可以在任何組件中通過this.props.navigation.navigate函數來觸發導航。在HomeScreen組件中，我們添加了一個按鈕，當用戶點擊該按鈕時，會將其導航到DetailsScreen屏幕。


import React from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

2. 使用Tab Navigator

Tab Navigator是一種導航類型，可以讓用戶在多個頁面間輕鬆切換，常見於需要在頁面之間切換的應用程序中。

下面是一個Tab Navigator的示例:


import React from 'react';
import { View, Text, Button } from 'react-native';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Settings Screen</Text>
      </View>
    );
  }
}

class ProfileScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
      </View>
    );
  }
}

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  },
  {
    navigationOptions: {
      tabBarLabel: 'Home'
    }
  }
);

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
  },
  {
    navigationOptions: {
      tabBarLabel: 'Settings'
    }
  }
);

const ProfileStack = createStackNavigator({
  Profile: ProfileScreen,
  },
  {
    navigationOptions: {
      tabBarLabel: 'Profile'
    }
  }
);

const RootStack = createBottomTabNavigator({
    HomeStack,
    SettingsStack,
    ProfileStack
});

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

在上面的代碼中，我們使用createBottomTabNavigator函數創建了一個Tab Navigator，並在其參數中指定了三個屏幕：HomeStack、SettingsStack和ProfileStack。通過使用createStackNavigator，我們為每個屏幕定義了一個堆棧導航器。

注意，我們通過在每個堆棧導航器的選項中指定tabBarLabel屬性來指定每個標籤欄的標籤標籤。

3. 使用Drawer Navigator

Drawer Navigator使用側邊欄菜單或抽屜式導航，可以讓用戶在多個頁面間輕鬆切換。

下面是一個Drawer Navigator的示例：


import React from 'react';
import { View, Text, Button } from 'react-native';
import { createDrawerNavigator, createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Open Drawer"
          onPress={() => this.props.navigation.openDrawer()}
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Settings Screen</Text>
      </View>
    );
  }
}

class ProfileScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
      </View>
    );
  }
}

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  },
  {
    navigationOptions: ({ navigation }) => ({
      headerLeft: <Button
        onPress={() => navigation.openDrawer()}
        title="Menu"
      />
    })
  }
);

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
  });

const ProfileStack = createStackNavigator({
  Profile: ProfileScreen,
  });

const RootStack = createDrawerNavigator({
    Home: HomeStack,
    Settings: SettingsStack,
    Profile: ProfileStack
});

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

在上面的代碼中，我們使用createDrawerNavigator函數創建了一個Drawer Navigator，並在其參數中指定了三個屏幕：HomeStack、SettingsStack和ProfileStack。我們定義了一個堆棧導航器來管理要在每個抽屜項目中顯示的屏幕。

注意，我們通過在HomeStack的選項中設置headerLeft屬性來為其添加一個自定義菜單按鈕。當用戶點擊該按鈕時，該組件的openDrawer方法將被觸發，打開抽屜菜單。

三、總結

本文介紹了React Navigation庫的基本知識，包括Stack Navigator、Tab Navigator和Drawer Navigator等導航類型的使用方法。通過使用Navigator、StackNavigator、TabNavigator和DrawerNavigator組件，開發人員可以輕鬆地創建和管理跨平台應用程序中的屏幕和標籤。有了這些知識，開發人員就可以創建出更加複雜和多樣化的應用程序。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/245896.html