[Day08 - React Native] 路由，使用 React Native Navigation

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() // 这边就会回到上一页