[ 卡卡 DAY 13 ] - React Native 页面导览 Navigation (上)

Navigation 的用处？
在一个 App 中一定会有很多页面，
Navigation 提供简单易用的跨平台导览，不论在 iOS 和 Android 都可以进行转页、tab 和汉堡选单的转导。

安装 Navigation

安装 react-navigation/native

npm install @react-navigation/native

安装依赖原生以下套件

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

PS. 安装後若是出现警告，可能是版本不同关系，可略过！

iOS update

cd ios
pod install

在 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);

接着将 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

如何使用呢?

於 App.js 引入

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

建立一个首页

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

放 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;