Geek Answers Handbook

Is reacting your own navigator the best way to simulate in a large application?

I would like to know how to model an application with the Navigator component to respond to a large application. I have two ways:

  • First, we can use the Navigator component as a top-level component and pass the details for each child component that the navigator object requires, or use passProps to transfer them to the next view and use the details again to make them available to the child components.
  • Secondly, people talk about the architecture of the stream and say that they start some actions and use this action to start navigation for the next view. This is good because we can check various states and redirect or restrict users to different views, for example. loggedIn, loggedOut, Owner, etc.

I tried to simulate navigation using the second strategy, launching some actions while maintaining listening and emitting changes with the status as a payload. Then I check the Navigation Top View component to check the key, and use the if statement to start navigation using this.prop.navigator.push . The problem I encountered is the navigator, which will not change otherwise if the instructions. Theoretically, it should work, but it does not work, and I have no idea.

For the first model, I have problems with passing the props. This is dirty!

Can someone provide me with a sample simulated diagram or github app for any of the use cases?

Code example:

 var Navigation = React.createClass({ mixins: [FluxMixin, StoreWatchMixin("NavigationStore")], getStateFromFlux: function() { var flux = this.getFlux(); console.log('Handled the Navigation: ', flux.store('NavigationStore').getState()); // console.log(this.props.navigator); var currentState = flux.store("NavigationStore").getState(); if(currentState.data.key !== undefined && currentState.data.key.explore !== undefined) { this.props.navigator.push({ id: 'YETANOTHERVIEW', title: 'Yet Another View', component: SomethingView, navigationBar: <NavigationBar title="Something View" />, passProps: { navigator: this.props.navigator } }); } else if(currentState.data.key !== undefined && currentState.data.key.other !== undefined) { this.props.navigator.push({ id: 'OTHERVIEW', title: 'Other View', component: OtherView, navigationBar: <NavigationBar title="Other View" />, passProps: { navigator: this.props.navigator } }); } else if(currentState.data.key !== undefined && currentState.data.key.appointments !== undefined) { AlertIOS.alert('Foo Title', 'My Alert Message'); } return flux.store("NavigationStore").getState(); }, render: function() { return ( <WelcomeView navigator={this.props.navigator} /> ); } });

NavigatorStore:

 var NavigationStore = Fluxxor.createStore({ initialize: function() { this.data = {}; this.bindActions( constants.CHANGE_NAVIGATION, this.onChangeNavigation, ); }, onChangeNavigation: function(payload) { console.log('on change navigation: ', payload); this.data = payload; this.emit("change"); }, getState: function() { return { data: this.data, }; }, });

If someone likes to study the code, go to this page: Respond to Natural Flow Navigation

I have three branches navigation , sidemenu-below and master . Sidemenu models the first case, while navigation models the second case. Strike>

UPDATE

Now I have navigation , sidemenu-below , initial and master branches.

navigation uses flow actions. master uses props

other experiments are in the sidemenu-below and initial branches.

Fixed code, works great!

+5
source share
2 answers

Please check https://github.com/aksonov/react-native-router-flux , maybe this will help you and anyone who is interested in controlling navigation in a large application.

It allows you to define all application transitions ("routes") in the top-level application component (usually index. *. Js), and then use something like Actions.logIn or Actions.log. Anywhere in the code to go to the desired screen.

+7
source

I managed to fix this problem, it should work well in the repository.

I forgot to import View and Text files from React into other_view.js . Stupid mistake!

0
source

More articles:


All Articles