How can I transfer the part of tabbarOptions code to ClojureScript - react-navigation

Question

How to use the TabNavigator of the react navigation in ClojureScript? It's really difficult to write navigationOption configuration and I want to know how to reach it.
I have do some efforts to address it, but not suitable. I have learned the mechanism of clojure compiler, so I try best to avoid the rookie mistakes.But it's really difficult to solve the problem of
anonymous function as the prop to some components. If you write them using fn, #(...)， the propname will changed when compiled to js.
THe javascript code shows as following:
const TabNavigator = createBottomTabNavigator({
HomeScreen: {
screen: HomeScreen,
navigationOptions:({naviagtion}) => ({
tabBarLabel: 'home',
tabBarIcon: ({focused, tintColor}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./assets/home.png')}
selectedImage={require('./assets/home.png')}
/>
)
})
},
Content: {
screen: content,
navigationOptions:({naviagtion}) => ({
tabBarLabel: 'content',
tabBarIcon: ({focused, tintColor}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./assets/content.png')}
selectedImage={require('./assets/content.png')}
/>
)
})
}
},
{
tabBarOptions: {
activeTintColor: '#4CB4E7',
inactiveTintColor: '#FFEE93',
style: {backgroundColor: '#FFC09F'}
}
}）
And this is my trying:
(defn tab-navigator []
(router/create-bottom-tabnavigator
(clj->js {:HomeScreen
(clj->js {:screen (r/reactify-component home-screen)
:navigationOptions (fn [{:keys [navigation]}]
(clj->js {:tabBarLabel "home"
:tabBarIcon (fn [{:keys [focused, tintColor]}]
(tabbar/tab-bar-item tintColor focused (js/require "../resources/assets/home.png") (js/require "../resources/assets/home.png")))}))})
:Content
(clj->js {:screen (r/reactify-component content/content)
:navigationOptions (fn [{:keys [navigation]}]
(clj->js {:tabBarLabel "conent"
:tabBarIcon (fn [{:keys [focused, tintColor]}]
(tabbar/tab-bar-item tintColor focused (js/require "../resources/assets/content.png") (js/require "../resources/assets/content.png")))}))})})
(clj->js {:tabBarOptions
{:activeTintColor "#4CB4E7"
:inactiveTintColor "#FFEE93"
:style {:backgroundColor "#FFC09F"}}
})))
Please give me a approach or some archive to refer, It's a really big gift.

Answer 1

I see two things :
You should use clj->js only before the first map
You should pass a map for the tabbar/tab-bar-item's properties
I use something like that for projects :
(defn tab-navigator []
(router/create-bottom-tabnavigator
(clj->js {:HomeScreen {:screen (r/reactify-component home-screen)
:navigationOptions
{:tabBarLabel "home"
:tabBarIcon (fn [{:keys [focused tintColor]}]
(tabbar/tab-bar-item
{:tintColor tintColor
:focused focused
:normalImage (r/as-element [:> rn/Image {:source (js/require "../resources/assets/home.png")}])}))}}})
(clj->js {:tabBarOptions
{:activeTintColor "#4CB4E7"
:inactiveTintColor "#FFEE93"
:style {:backgroundColor "#FFC09F"}}})))