How to use shortcut with adaptive navigation

Question

I tried to configure using react-native-router-flux and completed the following steps. Then I tried to follow the examples and also write down a lot of information in order to try to rebuild it for work. However, even after all the information I could find, I ended up in some strange structure:

sceneis an object containing the state of the router. However, the original state is replicated internally scene(therefore, it again contains objects devicesand rooms).

If I change the usual state devices or routes, it gives an error like: Key <name of the key> has already been defined(other people report the same problems here ).

So my question is: how do you redirect your own native apps using shorthand? Do you use other libraries? Are there any examples or documented resources that I could use to fix my code?

Think that it has a typical contraction structure. For example, it looks like this app/index.js::

import React, { Component } from 'react'
import { Router, Scene } from 'react-native-router-flux'
import { createStore, applyMiddleware, compose } from 'redux'
import { Provider, connect } from 'react-redux'
import logger from 'redux-logger'

import reducers from './reducers'
import Home from './components/home'
import Device from './components/devices'
import Login from './components/login'

const middleware = [logger()]
const store = compose(
  applyMiddleware(...middleware)
)(createStore)(reducers)

const RouterWithRedux = connect(reducers)(Router)

export default class AppContainer extends Component {
  render () {
    return (
      <Provider store={store}>
        <RouterWithRedux>
          <Scene key='login' component={Login} title='Login' />
            <Scene key='root' initial={true}>
            <Scene key='home' component={Home} title='Home' />
            <Scene key='device' component={Device} title='Device' />
          </Scene>
        </RouterWithRedux>
      </Provider>
    )
  }
}

Answer 1

my experiences of suffering, there is no way to prevent re-rendering Router, if you wrap it under Providerand listen to updates from redux, it is by design in nature.

, : Router :

, , Router redux.

, connect() Router redux dispatch(), .

, :

import {
    Router,
    Scene,
    Actions,
} from 'react-native-router-flux';


// --- child component can connect and listen to props they want.
const myConnectedMainConponent = connect()(myMainConponent);
const myConnectedLoginConponent = connect()(myLoginConponent);

// --- Create it via Actions.create(), or it will be re-created for each render of your Router
const scenes = Actions.create(
    <Scene key="root">
        <Scene key="login" component={myLoginConponent} />
        <Scene key="main" component={myMainConponent} />
    </Scene>
);

// --- Create connected Router if you want dispatch() method.
// --- Or you can just use vanilla Router
const myConnectedRouter = connect()(Router);

// --- your exported main router
export default class MyExportedRouter extends React.Component {
    constructor(props) {
        super(props);
    };

    render() {
        return (
            <Provider store={store}>
                <myConnectedRouter scenes={scenes} />
            </Provider>
        );
    }
}

p.s. , :)

:

• Router (, )
• Actions.create() Router

=====================

https://github.com/aksonov/react-native-router-flux/issues/376#issuecomment-241965769

@jsdario , ,

Answer 2

redux react-redux. createStore ( combineReducers):

const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk, promiseMiddleware())),
);

:

AppRegistry.registerComponent('app', () => () => (
  <Provider store={store}>
    <MainComponent />
  </Provider>
));

:

const mapStateToProps = (state) => ({
  isLoading: state.core.isLoading,
});

connect:

export default connect(mapStateToProps)(HomeScene);

Answer 3

NavigationExperimental -native.

.