iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Mobile Development

卡卡30天學 React Native系列 第 13

[ 卡卡 DAY 13 ] - React Native 頁面導覽 Navigation (上)

Navigation 的用處?
在一個 App 中一定會有很多頁面,
Navigation 提供簡單易用的跨平台導覽,不論在 iOS 和 Android 都可以進行轉頁、tab 和漢堡選單的轉導。

安裝 Navigation

  1. 安裝 react-navigation/native
npm install @react-navigation/native
  1. 安裝依賴原生以下套件
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

PS. 安裝後若是出現警告,可能是版本不同關係,可略過!

  1. iOS update
cd ios
pod install
  1. 在 index.js 檔案加入 react-native-gesture-handler (要在第一行)
import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
  1. 接著將 NavigationContainer 放在入口檔案(例如 index.js 或 App.js)
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';

const App = ()=> {
  return (
    <NavigationContainer>
        {/* your app code */}
    </NavigationContainer>
  );
}

export default App

安裝堆疊 stack

  • 什麼是堆疊呢?
    概念雷同 web 瀏覽器導航狀態,使用 push 的方式疊上新的頁面並且記錄 history,讓使用者可以看到不同的頁面,並且還提供 Android 和 iOS 在堆疊中的路由時需要的手勢和動畫。
npm install @react-navigation/stack
  • 如何使用呢?
  1. 於 App.js 引入
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();
  1. 建立一個 首頁
const Home = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home Screen</Text>
    </View>
  );
};
  1. 放 App.js
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App

最後整個檔案是...

//App.js
import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Text, View} from 'react-native';
const Stack = createStackNavigator();

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

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

https://ithelp.ithome.com.tw/upload/images/20210928/20142011jqKj1ErvhA.png

整體來講基本的安裝設定已完成,接著就是 Day 14 的如何放入頁面唷~

Day 13 done! 請多多指教


上一篇
[ 卡卡 DAY 12 ] - React Native UI 元件(component) 介紹(下)
下一篇
[ 卡卡 DAY 14 ] - React Native 頁面導覽 Navigation (中)
系列文
卡卡30天學 React Native30

尚未有邦友留言

立即登入留言