首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在clojurescript中使用React导航的StackNavigator

如何在clojurescript中使用React导航的StackNavigator
EN

Stack Overflow用户
提问于 2017-04-01 13:10:14
回答 2查看 1.2K关注 0票数 2

我是第一次接触clojurescript和试剂。我尝试在我的react-native应用程序中使用react导航,但我收到以下错误

代码语言:javascript
复制
Error rendering component (in env.main.reloader > exp_cljs.core.app_root > reagent2)

这是我的代码

代码语言:javascript
复制
(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

代码语言:javascript
复制
(defn app-root []
  (SimpleApp)); -- error
  ;(r/create-class {:reagent-render SimpleApp}); error
  ;(r/as-element (SimpleApp)); -- error
  ;(r/adapt-react-class SimpleApp)); --  error
EN

回答 2

Stack Overflow用户

发布于 2017-05-18 03:50:06

代码语言:javascript
复制
  (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:

代码语言:javascript
复制
(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)))
票数 1
EN

Stack Overflow用户

发布于 2018-09-17 01:01:02

诀窍是将React Native组件转换为Reagent组件,然后在需要的地方再转换回来。在下面的示例中,省略了login-screenmain-screen的定义,它们只是常规试剂组件。

代码语言:javascript
复制
(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将其转换回来。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43153072

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档