This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-03-14
Channels
- # aleph (1)
- # announcements (4)
- # babashka (12)
- # beginners (28)
- # bristol-clojurians (1)
- # calva (28)
- # cljs-dev (8)
- # cljsrn (1)
- # clojure (16)
- # clojure-europe (2)
- # clojure-uk (125)
- # clojurescript (6)
- # cursive (17)
- # datomic (2)
- # kaocha (7)
- # off-topic (6)
- # reagent (3)
- # shadow-cljs (25)
- # sql (6)
- # tree-sitter (1)
Hi, I just translate the React Native BottomNavigation eg. in CLJS Reagent + Shadow-CLJS and it works well. https://callstack.github.io/react-native-paper/bottom-navigation.html • In React-native:
import * as React from 'react';
import { BottomNavigation, Text } from 'react-native-paper';
const MusicRoute = () => <Text>Music</Text>;
const AlbumsRoute = () => <Text>Albums</Text>;
const RecentsRoute = () => <Text>Recents</Text>;
export default class MyComponent extends React.Component {
state = {
index: 0,
routes: [
{ key: 'music', title: 'Music', icon: 'queue-music' },
{ key: 'albums', title: 'Albums', icon: 'album' },
{ key: 'recents', title: 'Recents', icon: 'history' },
],
};
_handleIndexChange = index => this.setState({ index });
_renderScene = BottomNavigation.SceneMap({
music: MusicRoute,
albums: AlbumsRoute,
recents: RecentsRoute,
});
render() {
return (
<BottomNavigation
navigationState={this.state}
onIndexChange={this._handleIndexChange}
renderScene={this._renderScene}
/>
);
}
}
• In CLJS:
(ns myapp
(:require ["react-native-paper" :refer [BottomNavigation Text]]
[reagent.core :as r]
[shadow.expo :as expo]))
(def app-state (r/atom {:index 0
:routes [{:key "music" :title "Music" :icon "library-music"}
{:key "albums" :title "Albums" :icon "album"}
{:key "recents" :title "Recents" :icon "history"}]}))
(defn music-route []
[:> Text "Music"])
(defn albums-route []
[:> Text "Albums"])
(defn recents-route []
[:> Text "Recents"])
(def render-scene (.SceneMap BottomNavigation #js {:music (r/reactify-component music-route)
:albums (r/reactify-component albums-route)
:recents (r/reactify-component recents-route)}))
(defn bottom-navigation []
[:> BottomNavigation {:navigation-state @app-state
:on-index-change #(swap! app-state assoc :index %)
:render-scene render-scene}])
(defn start
{:dev/after-load true}
[]
(expo/render-root (r/as-element [bottom-navigation])))
(defn init []
(start))
I was just wondering if it was necessary to use reagent/adapt-react-class
and then reactify-component
or was there a solution to consume the Text
component directly?Perfect, thx for the confirmation.