My problem is sending param to Child Scene in React Native Router Flux.
This is my Router.js :
<Router>
<Stack key="root" hideNavBar>
<Scene key='anotherScreen' component={anotherScreen} initial> </Scene>
<Drawer key= 'DrawerMenu' contentComponent={DrawerScreen} drawerWidth={250} drawerPosition='left'>
<Scene key= 'tabBar' tabs
activeBackgroundColor='orange'
activeTintColor= 'purple'
inactiveBackgroundColor='grey'>
<Scene key= 'Home' title='Home'>
<Scene key='HomeScreen' title='HomeScreen' component={HomeScreen} ></Scene>
</Scene>
<Scene key= 'One' title='One'>
<Scene key='ScreenOne' title='One' component={ScreenOne} ></Scene>
</Scene>
<Scene key= 'Two' title='Two'>
<Scene key='ScreenTwo' title='ScreenTwo' component={ScreenTwo} ></Scene>
</Scene>
</Scene>
</Drawer>
</Stack>
</Router>
So, as you see there is one Scene which name is "anotherScreen" and other parent scene "tabBar" which includes 3 child scenes.
I want to send params from "anotherScreen" to child scene of "tabBar", for example "HomeScreen". But I cannot reach "HomeScreen" with Actions function. So, I cannot send my params to it. I can only reach parent Scene that is "Home".
I know I cannot route "anotherScreen" to "HomeScreen", I can only route to "Home" but then how can I send my params to it ?
Related
I am using react native router flux in my react native application.
I created some scenes in Route.
<Router>
<Scene key="root" hideNavBar={true} navigationBarStyle={{ backgroundColor: '#81b71a' }}>
<Scene key="auth">
<Scene key="login" component={LoginForm} title="Please Login" />
</Scene>
<Scene key="main" navigationBarStyle={{ backgroundColor: '#8fff1f' }}>
<Scene
key="mainScene1"
component={EmployeeList}
title="MainScene1"
/>
<Scene key="mainScene2" component={EmployeeCreate} title="MainScene1" />
<Scene key="MainScene3" component={EmployeeEdit} title="Edit Employee" />
</Scene>
</Scene>
</Router>
I want to navigate from mainScene3 to mainScene1 but getting error "Error: There is no route defined for key mainScene1. Must be one of: 'auth','main' "
How to tackle this issue? These two scene are in the same bucket.
Another query - How to navigate from login scene of auth to any scene say mainScene2 ? Is there any special method for that?
I word on react-native-router-flux and I have a problem ... I am reset my Stack navigation when I am changing of Tab navigation.
I try with backToInitial but I need to press two times on my tab for reset my stack ... I don't understand why.
My navigation :
-OSU
-Scarlet
-Gray
-VU
-Blue
-Black
So when I am on Blue and I press one time on OSU I when to access at Scarlet not gray
My code :
export default class App extends Component {
render() {
return (
<Router>
<Tabs
key="tabbar"
tabBarStyle={{ backgroundColor: '#FFFFFF' }}
backToInitial={true}
>
<Scene key="osu" title="OSU" icon={TabIcon} type='reset' backToInitial={true}>
<Scene
key="scarlet"
component={ScarletScreen}
title="Scarlet"
/>
<Scene
key="gray"
component={GrayScreen}
title="Gray"
/>
</Scene>
<Scene key="vu" title="VU" icon={TabIcon} backToInitial={true}>
<Scene
key="blue"
component={BlueScreen}
title="Blue"
/>
<Scene
key="black"
component={BlackScreen}
title="Black"
/>
</Scene>
</Tabs>
</Router>
);
}
}
I am trying to understand how to use router-flux and have multiple scenes/sub scenes similar to having multiple story boards, so that I can have a scene for the user sign up process, and then a scene for once the user is sign up and logged in.
At present I am doing this but it isn't given me the desired result
class NavigationRouter extends Component {
render () {
return (
<Router>
<Scene key='drawer' component={NavigationDrawer} open={false}>
<Scene key='root' tabs={true}>
<Scene key='account' hideNavBar={true} >
<Scene initial key='Login' component={Login} title='Login' />
<Scene key='SignUp' component={SignUp} title='SignUp' />
<Scene key='Account' component={Account} title='Account' />
<Scene key='Venue' component={Venue} title='Venue' />
</Scene>
<Scene key='auth' renderLeftButton={NavItems.hamburgerButton} navigationBarStyle={Styles.navBar} titleStyle={Styles.title} leftButtonIconStyle={Styles.leftButton} rightButtonTextStyle={Styles.rightButton} >
<Scene key='MenuItems' component={MenuItems} title='Your Menu' />
<Scene key='Orders' component={Orders} title='Orders' />
</Scene>
</Scene>
</Scene>
</Router>
)
}
}
The first part of the login/signup journey should not display the nav bar and allow the user to go back to the past step.
The second part should allow the logged in user to access the nav bar and side draw for the items which are defined in it
Even though grouping scenes with another scene looks more readable and correct, it makes Action not to work as expected, since Actions.SCENE() can only navigate within its siblings. In other words, two scenes should have the same parent.
Here's a modified version of your navigator tree. For example, you can start with Login scene, and route directly to tab1 by calling Actions.tabbar(). In your tabbar scene, there will be two subcomponents. User can manually navigate between tabs, or you can again call Actions.tab2(), since they're siblings too.
I prefer putting every scene sibling to another since it takes two chained actions. It looks a bit messy, but using spaces and comments help.
class NavigationRouter extends Component {
render () {
return (
<Router>
<Scene key='drawer' component={NavigationDrawer} open={false}>
<Scene key='root'>
{/* Authentications */}
<Scene initial key='Login' component={Login} title='Login' />
<Scene key='SignUp' component={SignUp} title='SignUp' />
<Scene key='Account' component={Account} title='Account' />
{/* Main */}
<Scene key='Venue' component={Venue} title='Venue' />
{/* Tabs... */}
<Scene key='tabbar' tabs={true} renderLeftButton={NavItems.hamburgerButton} navigationBarStyle={Styles.navBar} titleStyle={Styles.title} leftButtonIconStyle={Styles.leftButton} rightButtonTextStyle={Styles.rightButton} >
<Scene icon={Icon1} key='tab1' component={MenuItems} title='Your Menu' />
<Scene icon={Icon2} key='tab2' component={Orders} title='Orders' />
</Scene>
</Scene>
</Scene>
</Router>
)
}
}
If you want to jump directly to the sub-scene of a sibling, say tabbar1, combine two actions:
Actions.callback({key:'tabbar',type:'push'});
Actions.callback({key:'tab1',type:'jump'});
The ugliest part of the tree above is styling multiple scenes at once. Such as removing navbar from 5 siblings. And there you can define an object of props and add them into corresponding sub-scenes {...customProps}
Better way of organizing: Split your scenes to smaller parts if needed.
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 an alert to fire on a component's componentDitMount which is NOT an initial route (MainHome in this case). But when another component that is initial (MySchedule) is loaded it displays the alert. The routes are:
export default class Example extends React.Component {
render() {
return <Router createReducer={reducerCreate}>
<Scene key="modal" component={Modal} >
<Scene key="root" hideNavBar={true}>
<Scene key="tabbar" component={NavigationDrawer}>
<Scene key="main" tabs={true} default="tab2" >
<Scene key="my_schedule" component={MySchedule} hideTabBar={true} navBar={NavBar} initial={true} />
<Scene key="intro" component={Initial} hideTabBar={true} navBar={NavBar} />
<Scene key="home" component={Home} hideTabBar={true} navBar={NavBar} />
<Scene key="main_home" component={MainHome} hideTabBar={true} navBar={NavBar} />
</Scene>
</Scene>
</Scene>
<Scene key="error" component={Error}/>
</Scene>
</Router>;
}
}
And in the component MainHome's componentDidMount the alert is fired.
componentDidMount() {
Alert.alert(
'“Welcome...',
[
{text: 'OK'}
]
);
}
So in the initial component (MySchedule in this case) should not display the alert but it does and I can't figure out why. Your help would be much appreciated.
This is how NavigationView works.
<View
style={this.props.style}>
{this.props.navigationState.children.map(this._renderScene)}
</View>
NavigationExperimental is changing a lot, so this could change.
See https://github.com/facebook/react-native/issues/6579