RN 之 yarn add react-native-router-flux

在RN中，使用 yarn add react-native-router-flux，來下載 react-native-router-flux 路由組件。

下載完成後 當前 version


然後會陸續報錯
error: Error: Unable to resolve module react-native-screens from node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js: react-native-screens could not be found within the project.

yarn add react-native-screens

error: Error: Unable to resolve module react-native-gesture-handler from node_modules\react-navigation-stack\lib\module\views\StackView\StackViewLayout.js: react-native-gesture-handler could not be found within the project.

yarn add react-native-gesture-handler

error: Error: Unable to resolve module react-native-reanimated from node_modules\react-navigation-tabs\lib\module\views\MaterialTopTabBar.js: react-native-reanimated could not be found within the project.

yarn add react-native-reanimated

如果 yarn add react-native-router-flux 後出現

error An unexpected error occurred: "EPERM: operation not permitted, unlink 'XXX ..  \\node_modules\\@babel\\plugin-transform-runtime\\node_modules\\.bin'".
info If you think this is a bug, please open a bug report with the information provided in "XXX ..    \yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Solution：

You can delete the project root directory node_modules and yarn.lock . then yarn add react-native-router-flux. then yarn add react-native-gesture-handler react-native-reanimated react-native-screens

組件文檔裏，可能沒有說明清楚其他問題所在，所以需要我們一步步的去解決。

簡單介紹用法

// main.js
import React, { Component } from 'react'
import { Text, View, Image, ActivityIndicator } from 'react-native'

// 導入路由相關的組件
// Router 相當於 HashRouter
// Stack  分組容器， 不表示具體路由   專門給路由分組的
// Scene 路由規則，相當於 Route
import { Router, Stack, Scene } from 'react-native-router-flux';

import App from './App'

export default class Main extends Component {
    constructor(props){
      super(props)
      this.state={

      }
    }



  render() {
    return (
        <Router>
          <Stack key="root">
            <Scene key="App" component={App} title="首頁" />
            
          </Stack>
        </Router>
    )
  }
}