React Native - Microsoft Azure

React Native

Navigation: Tabs

1

Tab Navigation

? the most common style of navigation in mobile apps is tab-based navigation.

? This can be tabs on the bottom of the screen ? or on the top below the header ? or even instead of a header

? These slides cover createBottomTabNavigator

This tab navigation is part of the React Navigation library

2

References

? createBottomTabNavigator



? createMaterialBottomTabNavigator



? createMaterialTopTabNavigator



3

Minimal 2-tab

import React from 'react'; import { Text, View } from 'react-native'; import { createBottomTabNavigator } from 'reactnavigation';

class HomeScreen extends ponent { render() { return (

Home! ); } }

class SettingsScreen extends ponent { render() { return (

Settings! ); } }

export default createBottomTabNavigator({ Home: HomeScreen, Settings: SettingsScreen, });

4

5

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download