I am looking React Native Router flux and did everything I want, except Camera.
The structure of Router is like this.
<Router ...>
<Scene tabs>
<Scene /> // Scene1
<Scene /> // Scene2
</Scene>
</Router>
Scene2 is QR Scanner.
And if app is running, both scene1 and scene2 loaded at same time, and camera always working even though I am at Scene1.
So My devices blows and it seems to explode.
How can I stop camera when I am working on Scene1?
Please use onEnter/onExit function together with Actions.refs.YOUR_CAMERA_SCENE to start/stop camera like this:
<Router ...>
<Scene tabs>
<Scene /> // Scene1
<Scene key='QR' onEnter={()=>Actions.refs.QR.startCamera()} onExit={()=>Actions.refs.QR.stopCamera()} /> // Scene2
</Scene>
</Router>
And your QR React Component should have startCamera and stopCamera methods.
Related
I am using react-native-router-flux react native library for navigation but type Property not working
<Route name="error" component={Error} title="Error" type="reset"/>
it give error like
_this2[type] is not a function.
react-native-router-flux version 4.0.0-beta.28
The thing is type should use in <Scene> not in <Route>
here the working example
import { Router, Scene, Actions } from 'react-native-router-flux';
<Router>
<Scene key="root">
<Scene key="login" component={LoginForm} hideNavBar={'true'} initial={true} />
<Scene key="signin" component={SigninForm} />
<Scene
type="reset"
key="dashboard"
component={NavigationView}
initial={props.isLogin}
hideNavBar={'true'}
/>
</Scene>
</Router>
well there is other way:
remove type from scene and use it as a param when moving to other screen.
Actions.error({ type:'reset' });
or
Actions.reset('KEY'); // this one is work, i just tested now.
or you can replace see this
https://github.com/aksonov/react-native-router-flux/issues/467
you can pass js files as
<Router hideNavBar={true}>
<Stack key="root" hideNavBar={true}>
<Scene key="splashscreen" component={SplashScreen} title="SplashScreen" initial={true}></Scene>
</Stack>
</Router>
and whichever page you want to go you can pass
Actions.splashscreen()
(need to pass key written in scene)
How can I display the login page if the user is not authorized or a list of items?
I'm using react-native-router-flux
<Router>
<Scene key="user">
<Scene key="register1" component={RegisterStep1} title="register1"/>
<Scene key="register2" component={RegisterStep2} title="register2"/>
<Scene key="register3" component={RegisterStep3} title="register3"/>
<Scene key="login" component={Login} title="Login"/>
</Scene>
<Scene key="items" type={ActionConst.REPLACE}>
<Scene key="list" component={ItemList} title="Items list"/>
<Scene key="detail" component={ItemDetail} title="Item detail"/>
</Scene>
</Router>
is it right?
I should go to login Scene or items -> list Scene.
You can check if the user is authorized in the componentWillMount or componentDidMount lifecycle methods of your main component(The one that has the Router component) and call Actions.items() after everything goes well. Otherwise go to the login screen.
Also I recommend two things:
-Put your scenes inside a root scene as recommended by react-native-router-flux
-Set one of your screens as initial (with the prop of the scene: initial={true} so that the user can see something before your lifecycle method does its work.
I'm using react-native-tab-view as my main app container in which I have different components and nested tabs as well. However I wanted to use react-native-router-flux for navigation. I currently have the setup like so:
<Router>
<Scene key='root'>
<Scene hideNavBar key='home' component={ReactNativeTabViewContainer}
tabs ={true} initial={true} />
</Scene>
</Router>
But Right now the react-native-router-flux only sees a single route. How can I track the nav changes inside the React-native-tab-view and add those nav state to the main route state stored in redux.
I have the next React Native Router Flux Router code:
<Scene key="home" component={Modal}>
<Scene key="search">
<Scene key="unfiltered" component={Unfiltered} />
<Scene key="filtered" component={Filtered} />
</Scene>
<Scene key="menu">
<Scene key="menu1" component={Menu1} />
<Scene key="menu2" component={Menu2} />
</Scene>
<Scene key="calendar" component={Calendar} />
</Scene>
The problem is that when I call route Actions.menu() with two nested routes menu1 and menu2 from route search.unfiltered, nothing happens (for the first call I see action RNRF push and focus).
But if I call Actions.calendar() it's ok, as if I only call a menu1 within menu.
I also tried this solution:
<Scene key="menu1" component="menu1">
<Scene key="menu2" component="menu2" />
</Scene>
It works for menu1, but if I want to push to menu2 nothing happens.
How properly create modal that contains nested routes?
The answer is to move menu into "Search" scene, because the RNRF supports only one nested scene if the parent scene is Modal component.
I have two sub scene in my react-native-router-flux Router like
<Router>
<Scene key="root" ... >
<Scene key="login" ... />
<Scene key="parent" component={drawer}>
<Scene key="page1" ... />
<Scene key="page2" ... />
</Scene>
</Scene>
</Router>
Now, I'm in login scene. If I want to call page2, I'm using the following snippet.
Actions.parent()
Actions.page2()
It is working. But, Before rendering the page2 It is executing the page1 also, Since it is the initial element. How to open page2 without executing the page1?
Thanks in Advance,
Try this -
import { Actions, ActionConst } from 'react-native-router-flux';
<Button onPress={() => {
Actions.parent({type:ActionConst.RESET});
Actions.page2();
}}>