i 've a NavigationAnimatedView which rendering a ListView with pushed DetailsView.
In the NavigationHeader, on the rightComponent, i have a button and i want to display a view with NavigationCardStack from bottomToTop. How can i combine the two modes of navigation ?
Like the filters button on the F8 app on the home screen.
i don't understand how with a dispatch action (navigatePush ?) on the FiltersButton, i can't switch with a navigationCardStack to display a FilterViews from BottomToTop.
You can provide props to NavigationCard when you render it:
_renderScene(props) {
return (
<NavigationCard
style={NavigationCardStackStyleInterpolator.forVertical(props)}
...
Sorry that part isn't documented very well right now!
Related
Is there a way to prevent pull-to-refresh functionality for ScrollView component?
I want to be able scroll, but I don't wanna allow to pull down content of component and prevent situations like this:
You seem like you have placed the View containing you custom made action bar inside the scroll view, and what's happening in the image you provided isn't caused by pull-to-refresh it's provided by overscrolling so you got 2 solutions:
1-Place your action bar outside your ScrollView and make the action bar and the ScrollView childrens of 1 View.
2-Add alwaysBounceVertical={false} to your ScrollView props.
Hope this helps.
use a const refreshing = false , initially. Then on call of _onRefresh , change refreshing from false to true, and reinitialise the content of the scollview.
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
Does anyone know how a navigation drawer similar to the one in the Sonos app can be implemented? I have checked both Android and iOS versions of the app and see that the navigation drawer has been implemented in the same way for both platforms.
The two key things that I like and want to implement are:
the slide out drawer is below the navigation bar. When it slides out, the navigation bar is still visible
it appears as if it is the drawer that slides out, rather than the detail view moving to the right. I've noticed that the default master detail page slides out in a different way and it's not what we want.
Have a look at the images below so see I mean.
thanks
Although not technically a good practice, if you put a MasterDetailPage into a NavigationPage, it will slide out like in the above pictures. Here's how you do that:
In the App.cs constructor or your app's OnStart() method:
MainPage = new NavigationPage(new MyMasterDetailPage()) {
Title = "Your Title"
};
Create a new MasterDetailPage called MyMasterDetailPage.
In the constructor, add the following code:
Detail = new HomePage();
Master = new MenuPage()
{
Title = "Menu"
};
You then need to create a ContentPage for both HomePage and MenuPage.
One issue that you will run into if you use this method, is that if you don't call MyMasterDetailPage as the first page upon opening the app, the three horizontal bars on the NavigationBar won't appear, which will make it hard for users to tell there is a drawer. So if you need users to go to a login page or another page before your MasterDetailPage, you may want to find another implementation.
I couldn't figure out a way to scroll swiper when a button pressed inside a drawer.
To be exact: One component has a full screen swiper. When user clicks on hamburger button, drawer shows up with an array of swiper datasource items. I would like to navigate to clicked datasource item inside my component. Swiper already has a scrollBy function for this. I just need to know how can I possibly trigger my swiper to scroll x indexes.
I'm using Redux model in my application. I've tried to pass the reference of swiper via reducers but it just seemed wrong.