I have a component mxml in which I have a save button, on click of the save button I need to display another component which will be in a tab navigator, for this I am using the view stack. My problem is, on click of save I need to display the second tab instead of the first tab, but by default the first tab will be displayed.
How could this be accomplished?
I'll put a sample code piece on what my requirement was and how I did it.
In my main mxml i have a view stack
<mx:ViewStack id="loginViewStack" width="100%" height="100%">
<mx:ViewStack id="navigationViewStack" width="100%" height="100%">
<components:login id="id_login" label="Login"/>
<components:offering id="id_screen1" label="Screen1" />
</mx:ViewStack>
</mx:ViewStack>
Now say I completed successful login. I need to be taken to screen one, My screen (which is a component mxml). My screen contains a tab navigator and the requirement is I need to be taken to the second tab. So what I do is in the creation complete of my screen1 component I set the selectedIndex of my tab navigator to 1. and hurray! this solves the problem.
private function ():void
{
id_tabNavigator.selectedIndex = 1;
}
Related
In my app there are five tabs, each has there owned back buttons. I want to navigate back to the previous tab on the click of back button, without knowing that from which tab it has navigated.
Here is my code:
goBackPreviousTab = () => {
this.props.navigation.goBack()
}
Right now it doesn't work for tabs but it works fine for normal navigations. What can I try?
I want to open a menu on click of option button in header of a StackNavigator
snack link https://snack.expo.io/#abdulbsit/vengeful-macaroni-and-cheese
and here is the visual of screen https://drive.google.com/file/d/1mR3fL7KtF-BTp8OY9jlZlWvn3y_DGNhF/view?usp=sharing
Note: I don't want to use drawerNavigator, i want to make menu like this https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F0B8wSqcLwbhFuSGtLYzhXYWpRdk0%2Fbehavior-menu-multiple-position.mp4
you can do the above using making another component of menu using https://www.npmjs.com/package/react-native-material-menu
and import in your stack's Header button directly and to access navigation props in the menu component use withNavigation - https://reactnavigation.org/docs/en/connecting-navigation-prop.html
I am building an app in react native with the use of react-navigation. On one screen I need to display a simple dialog to make sure user really wants to exit that screen.
I've tried to add BackHandler listener but that does not apply when the user clicks on the back arrow in the header. Is there any way, how I can prevent transition back before user click on the alert button?
implement "headerLeft" of Screen Navigation Options, like
headerLeft=()=>{
return <Button onPress={}>
}
then you can do anything you want in onPress callback
My react component hierarchy looks like
StackNavigation
- MainScreen
- List
- Row
- Button
My usecase involves go to a new screen on click of the button. My main screen receives react-navigation's navigation props. How do I pass it down to my button in a sane manner.
You'd better pass a callback to your button through all the hierarchy and call it when button is pressed. Afterwards when you know which button is pressed (on which row) you can navigate to necessary screen from your MainScreen.
What is react-native component doing when the component is in background?
And What will react-native do when component re-active to foreground?
Like Page A navigate to Page B.
And Page B back to Page A.What happened to A and B?
Is there any ui update like onResume on Android or something?
Edit:
I have a TabNavagation with four tab.One of the tabs renders an Android UI Component which is a custom frameLayout(a listview is in the frameLayout).
When the frameLayout first rendered, the listview position is not correct(position is -4 item height).But when I navigate to a child page and goback, I found that the frameLayout is correct now and does't enter any android lifecycle.
So I'm wondering is it doing something background?
It is hard to tell without detail information on what type of navigation you are using but I can explain it considering you are using common navigation packages.
If your navigation is some sort of stack navigation, when you navigate/push a new screen to view the previous screen lays under the stack and doesn't un-mount. It is much like dealing a deck of card to a pile. It doesn't re-render unless the props or state of that specific component changes. When you navigate back the new screen un-mounts and the previous screen shows back.
Common packages lets you to pass props to the next screen and if you need to re-render a previous component a easy hack to achieve this by sending a function from the previous component and running it on componentWillUnmount life-cycle event of the current screen. I explained this sort of usage in this answer.
After debug many many times, I found that it is the react-navigation.
Four tabs in homepage with bottom tabbar.When I enter a child page with navigationOptions:{header:null}, the bottom bar is gone. And when I goback from the child page, the bottom bar has back meanwhile and the whole view has corrected.Seems the whole view is re-draw?So I called view.requestLayout() in createViewInstance().So the final result is the view need to requestLayout manual.
UPDATE:
answer top is not totally correct.The final problem is the custom view should measure self in its requestLayout.
I found the answer in https://github.com/facebook/react-native/issues/4990
#Override
public void requestLayout() {
super.requestLayout();
post(measureAndLayout);
}
private final Runnable measureAndLayout = new Runnable() {
#Override
public void run() {
measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
layout(getLeft(), getTop(), getRight(), getBottom());
}
};
And thanks for your answers.#bennygenel #Jouke