feat: return a NavigationContent component from useNavigationBuilder

This commit is contained in:
Satyajit Sahoo
2021-05-10 00:12:49 +02:00
parent a6e498170f
commit 1179d56c50
14 changed files with 246 additions and 198 deletions

View File

@@ -71,7 +71,12 @@ function MaterialTopTabNavigator({
);
}
const { state, descriptors, navigation } = useNavigationBuilder<
const {
state,
descriptors,
navigation,
NavigationContent,
} = useNavigationBuilder<
TabNavigationState<ParamListBase>,
TabRouterOptions,
TabActionHelpers<ParamListBase>,
@@ -85,12 +90,14 @@ function MaterialTopTabNavigator({
});
return (
<MaterialTopTabView
{...rest}
state={state}
navigation={navigation}
descriptors={descriptors}
/>
<NavigationContent>
<MaterialTopTabView
{...rest}
state={state}
navigation={navigation}
descriptors={descriptors}
/>
</NavigationContent>
);
}

View File

@@ -1,7 +1,6 @@
import * as React from 'react';
import { TabView, SceneRendererProps } from 'react-native-tab-view';
import {
NavigationHelpersContext,
TabNavigationState,
TabActions,
ParamListBase,
@@ -43,29 +42,27 @@ export default function MaterialTopTabView({
};
return (
<NavigationHelpersContext.Provider value={navigation}>
<TabView<Route<string>>
{...rest}
onIndexChange={(index) =>
navigation.dispatch({
...TabActions.jumpTo(state.routes[index].name),
target: state.key,
})
}
renderScene={({ route }) => descriptors[route.key].render()}
navigationState={state}
renderTabBar={renderTabBar}
renderLazyPlaceholder={({ route }) =>
descriptors[route.key].options.lazyPlaceholder?.() ?? null
}
lazy={({ route }) => descriptors[route.key].options.lazy === true}
onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
sceneContainerStyle={[
{ backgroundColor: colors.background },
sceneContainerStyle,
]}
/>
</NavigationHelpersContext.Provider>
<TabView<Route<string>>
{...rest}
onIndexChange={(index) =>
navigation.dispatch({
...TabActions.jumpTo(state.routes[index].name),
target: state.key,
})
}
renderScene={({ route }) => descriptors[route.key].render()}
navigationState={state}
renderTabBar={renderTabBar}
renderLazyPlaceholder={({ route }) =>
descriptors[route.key].options.lazyPlaceholder?.() ?? null
}
lazy={({ route }) => descriptors[route.key].options.lazy === true}
onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
sceneContainerStyle={[
{ backgroundColor: colors.background },
sceneContainerStyle,
]}
/>
);
}