This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-09-16
Channels
- # aleph (1)
- # aws (2)
- # bangalore-clj (2)
- # beginners (33)
- # cider (3)
- # cljs-dev (4)
- # cljs-experience (6)
- # cljsjs (1)
- # cljsrn (8)
- # clojure (84)
- # clojure-sanfrancisco (1)
- # clojure-spec (6)
- # clojure-uk (5)
- # clojurescript (42)
- # defnpodcast (3)
- # docs (3)
- # emacs (13)
- # events (1)
- # fulcro (2)
- # hoplon (19)
- # liberator (2)
- # off-topic (5)
- # onyx (7)
- # parinfer (1)
- # pedestal (1)
- # re-frame (13)
- # ring-swagger (13)
- # spacemacs (19)
- # yada (2)
I tried this but failed
(ns myapp.core
(:require [re-natal.support :as support]
[cljs-exponent.components :refer [text view image touchable-highlight] :as rn]))
(def ReactNavigation (js/require "react-navigation"))
(def StackNavigator (aget ReactNavigation "StackNavigator"))
(defn home []
(view {:style {:flexDirection "column" :margin 40 :alignItems "center"}}
(text {:style {:fontSize 30 :fontWeight "100" :marginBottom 20 :textAlign "center"}} "Hello World")))
(defn AppRoot []
(js/React.createElement StackNavigator (clj->js {:Home {:screen (home)}})))
(defonce root-component-factory (support/make-root-component-factory))
(defn mount-app [] (support/mount (AppRoot)))
(defn init []
(mount-app)
(.registerComponent rn/app-registry "main" (fn [] root-component-factory)))
[exp] [Invariant Violation: The component for route 'Home' must be a a React component. For example:
[exp]
[exp] import MyScreen from './MyScreen';
[exp] ...
[exp] Home: {
[exp] screen: MyScreen,
[exp] }
[exp]
[exp] You can also use a navigator:
[exp]
[exp] import MyNavigator from './MyNavigator';
[exp] ...
[exp] Home: {
[exp] screen: MyNavigator,
[exp] }]
@psdp you should pass a react component. (defn ->react "Convert a rum component to a react component." [rum-component] (:rum/class (meta rum-component))
try passing (->react home).
@tiensonqin Thanks for your advice! It's doesn't seem to work however, the return object became nil
@tiensonqin Awesome! Works like a charm:100:
@tiensonqin I would like to set a title for each navigation screen. Is it possible to set navigationOptions
inside component functions?
I tried this below, but it's not working:
(defc home <
{:did-mount (fn [state]
(let [comp (:rum/react-component state)]
(aset comp "navigationOptions" #js {:title "Home"})
state))}
[]
(view {:style {:flexDirection "column" :margin 40 :alignItems "center"}}
(text {:style {:fontSize 30 :fontWeight "100" :marginBottom 20 :textAlign "center"}} "Hello World")))
My workaround now is to pass a title
argument to ->react
wrapper function then set it for navigationOptions
. It works but I would prefer to move that to component functions as I can have more controls over there.
(defn ->react
"Convert a rum component to a react component."
[rum-component title]
(let [comp (:rum/class (meta rum-component))]
(aset comp "navigationOptions" #js {:title title})
comp))