如何将 tabbarOptions 代码的一部分转移到 ClojureScript

Question

如何在ClojureScript中使用react导航的TabNavigator？写navigationOption配置真的好难，想知道怎么实现。

我已经做了一些努力来解决它，但并不合适。学过clojure编译器的机制，所以尽量避免菜鸟mistakes.But 真的很难解决的问题匿名函数作为某些组件的 prop。如果用fn、#(...)写，编译成js后prop名字会变

javascript代码如下：

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'}
  }
}）

这是我的尝试：

(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"}}
    })))

请给我一个方法或一些档案参考，这是一个很大的礼物。

Answer 1

我看到两件事：

你应该只在第一张地图前使用clj->js
您应该为 tabbar/tab-bar-item 的属性传递地图

我在项目中使用类似的东西:

(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"}}})))

如何将 tabbarOptions 代码的一部分转移到 ClojureScript

How can I transfer the part of tabbarOptions code to ClojureScript

clojurescript

react-navigation