Video není dostupné.
Omlouváme se.
React Native Tutorial #23 - Navigation Options
Vložit
- čas přidán 22. 12. 2019
- Hey gang, in this React Native tutorial we'll take a look at a few extra navigation options we can use for our header - things like background colour, height & text colour.
----------------------------------------
🐱💻 🐱💻 Course Links:
Course files - github.com/iamshaunjp/react-n...
🐱💻 🐱💻 Other Related Courses:
+ Complete React Tutorial - • Complete React Tutoria...
+ React Hooks & Context Tutorial - • React Context & Hooks ...
+ Modern JavaScript Tutorial - • Modern JavaScript Tuto...
Every time i hear "Okay, gang!" from Shaun, i feel some kind of pride for being part of the Shaun Gang. Thank you for all your effort and vivid eloquence to put us, your gang, in the right way of learning. You're amazing!
UPDATED VERSION: To pass options to multiple Stack.Screens you can surround it with Stack.Group and add the screen options here.
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';
const Stack = createNativeStackNavigator();
export default function Navigator() {
return (
);
}
I don't know who you are, but you are a life saver.
How to change the height here?
Merry Christmas, Ninja. Your videos are already a Christmas Delight for us :)
Thanks Shaun for your incredible tutorials! I just wanted to share that in my case the title of the page just showed up automatically with the name of the screen, I didn't have to do anything :D! Anyway, I can still change it if I want ^_^
Thank you, Ninja.
We are waiting for the next videos ;-)
Merry Christmas.
Amazing tutorial. Best all over CZcams
January 2022: This is how you set the global header style now:
screenOptions={{
headerStyle: {
backgroundColor: "#c4c4c4"
},
headerTintColor: "#fff"
}}
why until now i can find your channel, Love your video
Thanks Shaun for All you do! I love your tutorials! ❤️
Keep up the good work!
Not sure, but looks like these few series might need some update.
Because I could not use the CreateAppContainer method, and it's not listed in react-native docs too.
Instead, I used
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// And implement in the App.js just like we do in React
function App() {
return (
);}
// if you know React
// Stack.Screen - here is like .
// As a whole everything is good - Thanks for these tutorials, it helps a lot!👍
'HO HO HO HOOO'!!!
Thanks Shaun epic video as usual.
Thank you so much!
Again again and again great tutorial
They've made some changes to React Navigation on version 4.x. This is how you define the options property :
Read the documentation here: reactnavigation.org/docs/upgrading-from-4.x/
thanks man
Hello friend, thanks for your efforts. i have one question. i make the initial navigation pages. now if i want to navigate from second page to 3rd page should i do another stack for the 2nd page? i can't navigate from 2nd to 3rd page?
Hey Shaun. Do you have an idea why my app looks not 100% of the device width? Pages look kind of in the middle of the screen, however, my app background shows normal by covering the entire screen.
Thanks very much dear, am learning alot from your trutorials, it very informative.
What if I wanna use a custom header and not the one provided by Stack Navigator?
if you are stuck because of the new navigator version go toreactnavigation.org/docs/upgrading-from-4.x/
and ctrl+f or command+f 'defaultNavigationOptions'
🔥🔥🔥
you ninja are osom, u r the messi of react natve haha
Messing around with the header bar height wasn't a great idea for Google Pixel phones. I needed to set height: 120. Leaving it default might be the best option for cross-compatibility.
changes in AppNavigator.js (new Navigator version):
const { Navigator, Screen } = createStackNavigator();
export const HomeNavigator = () => (
);
thanks
Can you please add more videos on react native .It is easy to understand from your videos
Thanks.
What if you want to use a parameter inside the title? Like, for example, when you go to a game details page, you want to display the game title as a page title. I was not able to figure out how to do this in a functional component.
we can add a callback in navigationOptions and get a access to its navigation object, see the example below.
navigationOptions: ({navigation}) => {
return {
title: navigation.getParam("title")
}
}
Hey thanks, man for video!!!! just one note: you forget to add links.
Nice Video, Please upload a Video Tutorial for Splash Screen with 3 Second timer and Move to next page(Home) automatically and Please tell me , border radius use and how to use in Flex , Please upload a video tutorial.
how to add a button to header?
The header never showed up for me and even implementing the new version of navigation, it didn't work. Anyone with the same issue?
how can i hide the header
Hello shaun, Please could you update your react native tuts. This is giving me so much problems and errors
sir, how would you make a custom Title name for each item in that list, instead of 'Review Detail' for all of them? plz (0_0)
I guess you can use the context api
const Stack = createStackNavigator();
export default function HomeStack() {
const { currentReview } = useContext(ReviewContext)
return (
);
}
({ title: route.params.user })}
/>
this is from the official documentation
Updated navigation Options:
const { Navigator, Screen } = createStackNavigator();
const HomeNavigator = () => (
);
first comment, happy Christmas in advance
So the defaultNavigationOptions isnt available on the v5 i think.
Yeah it got updated again. But they now have screenOptions. Put it within the and then it can be shared across screens.
reactnavigation.org/docs/headers/
men im getting lost, other libraries are no longer supported
I wish they wouldn't change react navigator every 3 days