Tab Navigator for Absolute Beginners [React Navigation 3.0] [Tutorial?]

React Navigation Tab Navigator source code: https://snack.expo.io/@bacon/tab-navigation-tutorial-video
React Navigation: https://reactnavigation.org/docs/en/api-reference.html
React Native Paper: https://callstack.github.io/react-native-paper

👨🏻‍💻 QUESTIONS
➜ How many times did I say absolute(ly)?
➜ I had to look up what a "tri-breed" dog was, is that just me?
➜ Is the intro the first time you ever saw the computer man?

⭐ RECAP:
⌨️ 0:02 Intro
⌨️ 0:09 Plot twist
⌨️ 0:12 What is React Navigation
⌨️ 0:30 Brent Vatne @notbrent
⌨️ 0:35 Brent's dog Lucy @lucythetri
⌨️ 0:44 Demo
⌨️ 1:01 Demo 2
⌨️ 1:11 Super Satya @satya164
⌨️ 0:18 "Tutorial" begins
⌨️ 5:12 Second #tutorial begins
⌨️ 7:54 Outro

Hey guys, this is a quick look at the (react native) #reactnavigation 3.0 tab navigator. We'll be using #VSCode to code.

React Navigation is fully #crossplatform and can also be used in the web! In my opinion React Navigation is the best navigation library for react-native, I find it's much easier to customize and work with than react-native-navigation by wix (😜).

🤓 Description:
React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution written entirely in #JavaScript (so you can read and understand all of the source), on top of powerful native primitives.

🤔 createBottomTabNavigator

A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.

🤔 createBottomTabNavigator

A material-design themed tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.

🤔 createMaterialTopTabNavigator

A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the route or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately.

We will use the popular icon library #ionicons to create icons very simply, because this library is already in Expo we don't have to worry about downloading and linking the assets.

We'll also be looking at App Containers. Containers are responsible for managing your app state and linking your top-level navigator to the app environment. On Android, the app container uses the Linking API to handle the back button. The container can also be configured to persist your navigation state. On web, you'd use different containers than React Native.

Thanks for watching and reading! If you have any more questions feel free to tweet me on instagram 😁 @baconbrix 🥓

Тэги:

#React_Navigator_Version_2.0 #Tab_Navigator #New_React_Navigation_Tab_Navigator #Simple_React_Native_React_Navigation #Expo.io #React_Native #Mobile_Navigation #react_native_tutorial_ios #react_native_tutorial_android #javascript #react #react_navigation_v3 #react_native_app #expo_tutorial #flutter #react_native_navigation #react_native_firebase #react_native_expo #react_navigation_3 #react_tab_navigation #react_navigation_tabnavigator_with_examples #createbottomtabnavigator #coding

Скачать видео