如何在clojurescript中使用React导航的StackNavigator
如何在clojurescript中使用React导航的StackNavigator
提问于 2017-04-01 13:10:14
我是第一次接触clojurescript和试剂。我尝试在我的react-native应用程序中使用react导航，但我收到以下错误
Error rendering component (in env.main.reloader > exp_cljs.core.app_root > reagent2)这是我的代码
(def react-navigation (js/require "react-navigation"))
(def StackNavigator (aget react-navigation "StackNavigator"))
(defn Home
[]
[text "Hello Navigator"])
(defn SimpleApp
[]
(StackNavigator
(clj->js {:Home {:screen (r/create-class {:reagent-render (Home)})}})))
(defn init []
(dispatch-sync [:initialize-db])
(.registerComponent rn/app-registry "main" #(r/reactify-component app-root)))这是我的app-root
(defn app-root []
(SimpleApp)); -- error
;(r/create-class {:reagent-render SimpleApp}); error
;(r/as-element (SimpleApp)); -- error
;(r/adapt-react-class SimpleApp)); -- error回答 2
Stack Overflow用户
发布于 2017-05-18 03:50:06
(ns same.app
(:require [reagent.core :as r]
[same.ui :as ui]
[same.util :as u]
[same.screens.auth :refer [AuthScreen]]
; [same.screens.reg :refer [RegScreen]]
; [same.screens.resend :refer [ResendScreen]]
[same.screens.splash :refer [SplashScreen]]
; [same.screens.drawer :refer [Drawer]]
[same.screens.presentation :refer [Presentation]]))
(def routes #js {;:Drawer #js {:screen (r/reactify-component Drawer)}
:AuthScreen #js {:screen (r/reactify-component AuthScreen)}
;:RegScreen #js {:screen (r/reactify-component RegScreen)}
;:ResendScreen #js {:screen (r/reactify-component ResendScreen)}
:Presentation #js {:screen (r/reactify-component Presentation)}
:Splash #js {:screen (r/reactify-component SplashScreen)}})
(def Routing (ui/StackNavigator.
routes
#js {:initialRouteName "Splash"
:headerMode "none"
:mode "modal"}))
(def routing (r/adapt-react-class Routing))
(defn AppNavigator []
(fn []
[routing]))和android.core：
(ns same.android.core
(:require [reagent.core :as r :refer [atom]]
[re-frame.core :refer [dispatch-sync]]
[same.ui :as ui]
[same.events]
[same.subs]
[same.app :refer [AppNavigator]]))
(aset js/console "disableYellowBox" true)
(defn app-root []
(fn []
[AppNavigator]))
(defn init []
(dispatch-sync [:initialize-db])
(.registerComponent ui/app-registry "Same" #(r/reactify-component app-root)))Stack Overflow用户
发布于 2018-09-17 01:01:02
诀窍是将React Native组件转换为Reagent组件，然后在需要的地方再转换回来。在下面的示例中，省略了login-screen和main-screen的定义，它们只是常规试剂组件。
(def react-navigation (js/require "react-navigation"))
(def stack-navigator (.-createStackNavigator react-navigation))
(def switch-navigator (.-createSwitchNavigator react-navigation))
; ...
; ...
; ...
(defn application-nav-stack []
(stack-navigator (clj->js { "MainApp" (r/reactify-component main-screen) })))
(defn authentication-nav-stack []
(stack-navigator (clj->js { "Login" (r/reactify-component login-screen) })))
(defn app-navigation-switch []
(switch-navigator
(clj->js { :Auth (authentication-nav-stack) :MainApp (application-nav-stack) })
(clj->js { :initialRouteName :Auth } )))
(defn app-root []
[ (r/adapt-react-class (app-navigation-switch)) ] )
(defn init []
(dispatch-sync [:initialize-db])
(.registerComponent app-registry "MyApp" #(r/reactify-component app-root)))当您将Reagent组件传递给ReactNavigation function时，您需要使用reactify-component将其转换为本机JS格式；当您需要使用ReactNavigation组件作为Reagent组件的一部分时，您需要使用adapt-react-class将其转换回来。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43153072
复制相关文章
相似问题
腾讯云开发者
