在 WebViewGold iOS 和框架 7 中启用路由

WebViewGold是一款强大的混合移动应用构建工具，可让您快速构建具有全面功能和脚本的应用程序。 WebViewGold还支持应用内导航，即路由。

在本文中，我们将介绍如何在WebViewGold iOS和框架7中启用路由功能。

步骤1：添加库文件和依赖项

首先，您需要添加以下库文件和依赖项：

• React Native Navigator https://github.com/wix/react-native-navigation
• React Native Gesture Handler https://github.com/software-mansion/react-native-gesture-handler
• React Native Reanimated https://github.com/software-mansion/react-native-reanimated
• React Native Screens https://github.com/software-mansion/react-native-screens
• React Native Vector Icons https://github.com/oblador/react-native-vector-icons

您可以使用CocoaPods将它们添加到您的项目中。在终端中运行以下命令：

cd /path/to/project
pod init

打开“ Podfile ”并添加以下内容：

platform :ios, '9.0'

use_frameworks!

target 'TARGET_NAME' do
  # React Native
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket',
    'RCTAnimation',
    'RCTImage',
    'RCTLinkingIOS',
  ]

  # Required by React Native Navigator
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # React Native Navigator
  pod 'ReactNativeNavigation', :path => '../node_modules/react-native-navigation'

  # React Native Gesture Handler & Reanimated & Screens
  pod 'react-native-gesture-handler', :path => '../node_modules/react-native-gesture-handler'
  pod 'react-native-reanimated', :path => '../node_modules/react-native-reanimated'
  pod 'react-native-screens', :path => '../node_modules/react-native-screens'

  # React Native Vector Icons
  pod 'react-native-vector-icons', :path => '../node_modules/react-native-vector-icons'
end

然后在终端中运行以下命令：

pod install

步骤2：创建屏幕枚举

现在，您需要创建一个屏幕枚举，其中包含您希望在应用程序中使用的所有屏幕的名称和标识符。例如：

enum Screens: String {
    case Home = "Home"
    case About = "About"
}

步骤3：创建路由

然后，您需要创建一个路由，它将处理应用程序中的导航。在您的AppDelegate.swift文件中添加以下内容：

import ReactNativeNavigation

let startApp = {
    Navigation.setDefaultOptions(
        Navigation.OPTIONS_TOP_BAR.title.text(""), // 设置默认标题为空
        Navigation.OPTIONS_TOP_BAR.background.color(.white), // 设置默认背景颜色为白色
        Navigation.OPTIONS_BOTTOM_TABS.backgroundColor(Color.WHITE.hexStringToUIColor()),
        Navigation.OPTIONS_BOTTOM_TABS.tintColor(Color.BLUE.hexStringToUIColor()),
        Navigation.OPTIONS_BOTTOM_TABS.titleDisplayMode(.alwaysShow)
    )

    Navigation.registerComponent(Screens.Home.rawValue) { return App() }
    Navigation.registerComponent(Screens.About.rawValue) { return About() }
    Navigation.setDefaultOptions(RNNNavigationOptions())
    Navigation.setRoot([
        Navigation.createStack(
            // 设置启动屏幕
            Navigation.createRootTab(
                Navigation.createBottomTab(Screens.Home.rawValue, "Home", "ios-home-outline", "ios-home"),
                Navigation.createBottomTab(Screens.About.rawValue, "About", "ios-information-circle-outline", "ios-information-circle")
            )
        )
    ])
}

...

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    Bundle.main.path(forResource: "main", ofType: "jsbundle")

    self.window?.rootViewController = RNNNavigation.sharedInstance().createRootController(startApp)

    return true
}

步骤4：使用导航器

现在，您需要在应用程序中使用导航器来启用路由。在您的任何屏幕视图控制器中添加以下内容：

import ReactNativeNavigation

class Home: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white
        title = "Home"

        let settingsButton = UIBarButtonItem(title: "About", style: .plain, target: self, action: #selector(showAbout))
        navigationItem.rightBarButtonItem = settingsButton
    }

    @objc func showAbout() {
        Navigation.push(self, component: Screens.About.rawValue)
    }
}

在上面的代码中，我们使用“ Navigation.push ”在导航器中推送新屏幕。

这就是在WebViewGold iOS和框架7中启用路由的所有步骤。现在，您可以构建具有功能丰富，应用内导航的应用程序。