const AppTabs = TabNavigator({
Home: {
screen: FilmList,
},
FilmCinemaList: {
screen: FilmCinemaList,
path: 'cart',
},
FilmGoodsList: {
screen: FilmGoodsList,
},
FilmMe: {
screen: FilmMe,
},
})
when I click FilmCinemaList, i wanna pass a params. how to use setParams?
You can pass the params this way when rendering your AppTabs:
<AppTabs screenProps={{ FilmCinemaList: { ...yourParams } }}/>
And you can access them on FilmCinemaList by:
this.props.screenProps.FilmCinemaList
.
Through navigationOptions, what you have to do is to set the navigationOptions for the screen before pass it in the TabNavigator like the following:
FilmCinemaList.navigationOptions = {
'param1':'value1';
};
const AppTabs = TabNavigator({
Home: {
screen: FilmList,
},
FilmCinemaList: {
screen: FilmCinemaList,
path: 'cart',
},
FilmGoodsList: {
screen: FilmGoodsList,
},
FilmMe: {
screen: FilmMe,
},
})
And then you can access it
FilmCinemaList.navigationOptions.param1
When ever you need to.
Related
I'm using react-native-navigation v3 and I'm trying to go from a screen in one stack to another screen in a different stack.
When I trigger onDetailButtonPress from the LoggedInStack, I'm able to open the ReleaseDetail screen but the bottomTabNavigator disappears and I get an error: Can't perform a React state update on an unmounted component.
What is causing this issue here? I'm able to navigate from the HomeStack to the LoggedInStack but not the other way around.
HomeStack.js:
const HomeStack = createStackNavigator(
{
Home: {
screen: HomeScreen
},
Settings: {
screen: SettingsScreen
},
ReleaseDetail: {
screen: ReleaseInfoContainerScreen
},
SettingOnboard: {
screen: OnboardStack
}
},
{
headerMode: 'none'
}
)
LoggedInStack.js:
onDetailButtonPress={() => {
this.props.navigation.navigate(
NavigationActions.navigate({
routeName: 'HomeStackView',
params: {},
action: NavigationActions.navigate({
routeName: 'ReleaseDetail',
params: {
releaseId: selectedReleaseId
}
})
})
)
}}
export const LoggedInStack = createStackNavigator(
{
TabNavigator: {
screen: connectedLoggedInTabContainerView,
navigationOptions: {
header: null
}
},
FullScreenPlayer: {
screen: PlayerScreen,
navigationOptions: {
header: null
}
},
},
{
mode: 'modal',
headerMode: 'none'
}
)
Try to use:
onDetailButtonPress={() =>
this.props.navigation.navigate('ReleaseDetail', { releaseId: selectedReleaseId })
}
I want to accomplish the most commont android structure: a drawer navigator with an header (stackNavigator).
The app is very simple: it is a dictionary and shows a list of item grouped by first letter (BrowseScreen) and also it allows a search by keyword (SearchScreen, someone call this Master–detail pattern).
Starting from those 2 screens, I have to be able to reach the ItemScreen (which shows the details of a single term).
How can I structure this in react-navigator 3? This is my attempt, but I'm not sure it's the best way, and also I don't know where to place ItemScreen. No drawer item should be active while I'm on an ItemScreen.
const RootDrawer = createDrawerNavigator(
{
Home: {
screen: createStackNavigator({
Home: { screen: Home },
//Browse: { screen: Browse },
//Search: { screen: Search }
}, {
initialRouteName: 'Home',
})
},
Browse: {
screen: createStackNavigator({
Browse: { screen: Browse }, //it shows a grid of buttons with the alphabet
Search: { screen: Search }, //it shows the items by a First letter
}, {
initialRouteName: 'Browse',
})
},
Search: {
screen: createStackNavigator({
Search: { screen: Search}
}, {
initialRouteName: 'Search',
})
},
Bookmarks: {
screen: createStackNavigator({
Bookmark: { screen: Bookmarks },
Item: { screen: ItemScreen },
}, {
initialRouteName: 'Bookmark',
})
}
},
{
mode: 'modal',
headerMode: 'screen' ,
initialRouteName: 'Home',
}
);
I have a nested stack navigator within a tab navigator like so:
const MainNavigator = createBottomTabNavigator({
BookmarksList: createStackNavigator({
BookmarkList: { screen: BookmarkList },
UpdateBookmark: { screen: UpdateForm }
}),
NewBookmark: createStackNavigator({
NewBookmark: { screen: NewBookmarkScreen }
})
});
When I set navigationOptions title text for BookmarkList, it only changes the header text, but not the tab text.
For example, I've set my BookmarkList title to My Bookmarks.
class BookmarkList extends Component {
static navigationOptions = {
title: 'My Bookmarks'
};
}
This gets reflected in the header text, but not in the tab text, which still says BookmarkList (circled in red):
How do I get both header and tab text to change to the same text?
tldr; Customising title via navigationOptions only changes header text, but not tab text in nested stack navigator within tab navigator. How to change both header and tab text?
One solution:
const BookmarksList = createStackNavigator({
BookmarkList: { screen: BookmarkList },
UpdateBookmark: { screen: UpdateForm },
});
const NewBookmark = createStackNavigator({
NewBookmark: { screen: NewBookmarkScreen },
});
const MainNavigator = createBottomTabNavigator({
BookmarksList: {
screen: BookmarksList,
navigationOptions: {
title: 'My Bookmarks',
},
},
NewBookmark: {
screen: NewBookmark,
navigationOptions: {
title: 'New Bookmarks',
},
},
});
I had two duplicate headers with the solution of #aciobanita, because I have a parent AppContainer, it is necessary to deactivate the header of the parent and then use the solution of #aciobanita, its works for me without problem
const AppNavigator = createStackNavigator(
{
MainApplication: {
screen: MainApplication,
},
},
{
headerMode: 'none'
}
);
export default createAppContainer(AppNavigator);
Child component:
const BookmarksList = createStackNavigator({
BookmarkList: { screen: BookmarkList },
UpdateBookmark: { screen: UpdateForm },
});
const NewBookmark = createStackNavigator({
NewBookmark: { screen: NewBookmarkScreen },
});
const MainNavigator = createBottomTabNavigator({
BookmarksList: {
screen: BookmarksList,
navigationOptions: {
title: 'My Bookmarks',
},
},
NewBookmark: {
screen: NewBookmark,
navigationOptions: {
title: 'New Bookmarks',
},
},
});
export default createAppContainer(MainNavigator);
Consider the render of the Main component:
render() {
const { isAuthenticated } = this.props;
return (
<View>
{isAuthenticated ? <Dashboard /> : <Login />}
</View>
);
I want to lock the drawer in the Login component. Now i know that i could achieve this if Login wasn't a child of Main this way (in my Router component):
Login: {
screen: Login,
navigationOptions: () => ({
drawerLockMode: 'locked-closed',
}),
},
But since Login is a child of Main and Main has the drawer, Login will automatically have the drawer too. I've tried "overriding" it by calling this in Login:
static navigationOptions = {
drawerLockMode: 'locked-closed',
};
But no success. Here's my Router:
const Stack = {
Main: { screen: Main },
Login: {
screen: Login,
navigationOptions: () => ({
drawerLockMode: 'locked-closed',
}),
},
Outbox: { screen: Outbox },
Dashboard: { screen: Dashboard },
JobList: { screen: JobList },
CreateJob: { screen: CreateJob },
Reporting: { screen: Reporting },
JobDescription: { screen: JobDescription },
};
const DrawerRoutes = {
DrawerStack: {
name: 'DrawerStack',
screen: StackNavigator(
Stack,
{
initialRouteName: C.MAIN,
headerMode: 'none',
navigationOptions: {
gesturesEnabled: false,
},
}),
},
};
export const DrawerNavigation = StackNavigator({
Drawer: {
name: 'Drawer',
screen: DrawerNavigator(DrawerRoutes, {
contentComponent: DrawerPanel,
}),
},
...Stack,
}, { headerMode: 'none' });
Is there a way to achieve this ?
New to react-navigation and trying to lazy load a screen. I'm using the new version 1.0.0-beta.27, but it seems like both lazyLoading and lazy doesn't work in this version. Is there any other way to implement this?
My code:
const MainNavigator = TabNavigator({
welcome: { screen: WelcomeScreen },
login: { screen: LoginScreen},
main: {
screen: TabNavigator({
map: { screen: MapScreen },
deck: { screen: DeckScreen },
review: {
screen: StackNavigator({
review: { screen: ReviewScreen },
settings: { screen: SettingsScreen }
})
}
})
}
}, {
lazy: true
});