React Navigation 在這邊使用 Wix/React Native Navigation搭配 Wix/React Native Navigation Hooks。可以參考官方文件。

Installation

輸入以下指令

yarn add react-native-navigation

iOS 需要執行 npx pod-install

註冊 Screen

利用 setRoot 來註冊畫面：

第一步要先註冊畫面：

Navigation.registerComponent(
    'HOME_SCREEN', // componentName
    () => reduxWrapper(HomeScreen), // componentProvider
    () => HomeScreen, // concreteComponentProvider (optional)
  )
);

上方的 component provider reduxWrapper 裡面長這樣：

const reduxWrapper = (Component) => (props) => {
    return (
        <Provider store={store}>
            <Component {...props} />
        </Provider>
    )
}

接下來註冊 Root

const basicRoot = () =>
Navigation.setRoot({
    root: {
        stack: {
          children: [
            {
              component: {
                name: 'LOGIN_SCREEN'
              }
            }
          ]
        }
    }
});

最後在 APP.js 裡面加入 basicRoot 即可

Navigation.events().registerAppLaunchedListener(() => {
  basicRoot();
}

切換頁面

當你想要將畫面移動到下一個頁面的時候，利用 push 的方式往前推進，當你想要往回的時候，使用 pop 往後移動。範例如下：

import { useNavigation } from 'react-native-navigation-hooks'

const { push, pop } = useNavigation();

push('PAHT_NAME', { ...passProps });

pop() // 這邊就會回到上一頁