CODEWITHSUNDEEP
androidreactjsnavigationreact-native
czphilip
czphilip

Reputation: 967

How to design the navigator structure of a React-Native Android app?

I am building an Expense Keeping app with React-Native on Android. Below is the UI flow chart of my app:

  1. I wish to use the Drawer to navigate between top level scenes (shown in dark red).

  2. In the Settings scene, there are options that require to navigate to a group of 2nd level scenes which can only navigate back to the Settings scene (shown in blue).

enter image description here

I want my Navigation bar to persist across scene transitions, so I am using the navigationBar props of the <Navigator> component.

Using a single <Navigator> as the top component in my app and manage all the scenes and routes with it is an obvious solution but this way it is harder to manage the "levels" of scenes.

I would like to know if there are any other better ways to structure the <Navigator> in my app, perhaps nesting navigators?

Upvotes: 3

Views: 1832

Answers (3)

esh
esh

Reputation: 2872

I know this is an old question, but it is still relevant and just to keep this up-to-date, use React-Navigation (Warning: requires some learning and practice). You can use this example. Look out for the navigation tree in that. It is similar to what the question needs.

Upvotes: 1

aksonov
aksonov

Reputation: 853

Have you tried react-native-router-flux component?

Upvotes: 0

Thang BA
Thang BA

Reputation: 162

You can using Fragment.

First: In Activity. You create Navigatior. in xml of Activity have:

<DrawerLayout>

<Toolbar> or (Control Home of you)

<FrameLayout id="content_main">

Then: You create SettingFragment extend Fragment

HomeFragment extend Fragment

ExpansesFragment extend Fragment

import support.v4.Fragment

In Activity extend Activity

onCreate:

    FragmentManager manager = getSupportFragmentManager();
    manager.beginTransaction()
            .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
            .replace(R.id.content_main, HomeFragment)
            .commit();

On Drawer. event Onclick

Home

  FragmentManager manager = getSupportFragmentManager();
    manager.beginTransaction()
            .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
            .replace(R.id.content_main, HomeFragment)
            .commit();

Expenses

FragmentManager manager = getSupportFragmentManager();
    manager.beginTransaction()
            .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
            .replace(R.id.content_main, ExpensesFragment)
            .commit();


Category

  FragmentManager manager = getSupportFragmentManager();
    manager.beginTransaction()
            .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
            .replace(R.id.content_main, CategoryFragment)
            .commit();

Upvotes: -4

Related Questions