React Native has nested routines and modal boxes

This is the 11th day of my participation in the August Wenwen Challenge.More challenges in August

Global modal box

Similar to Alert. Alert (“…” ) to display content that is temporarily blocked from the main view interaction

Create stack modal boxes

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

/ / home page
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1.alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30}} >This is the home screen!</Text>
      <Button
        onPress={()= > navigation.navigate('MyModal')}
        title="Open Modal"
      />
    </View>
  );
}

/ / modal dialog
function ModalScreen({ navigation }) {
  return (
    <View style={{ flex: 1.alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30}} >This is a modal!</Text>
      <Button onPress={()= > navigation.goBack()} title="Dismiss" />
    </View>
  );
}

/ / page for details
function DetailsScreen() {
  return (
    <View>
      <Text>Details</Text>
    </View>
  );
}

// Create stack navigation
const MainStack = createStackNavigator();
const RootStack = createStackNavigator();

function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Home" component={HomeScreen} />
      <MainStack.Screen name="Details" component={DetailsScreen} />
    </MainStack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator mode="modal" headerMode="none">
        <RootStack.Screen name="Main" component={MainStackScreen} />
        <RootStack.Screen name="MyModal" component={ModalScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

export default App;
Copy the code

In the above code, the MainStackScreen component acts as the screen inside the RootstackScreen! By doing so, we nested a stack navigator within another stack navigator. Because we want to use different transformations for the modes. Because the RootStackScreen renders the stack navigator and has its own title and some other properties.

Tabbed navigation

Document portal

Many times an application will have more or less TAB navigation, such as a row of shortcut TAB navigation at the bottom.

$ npm install @react-navigation/bottom-tabs
or 
$ yarn add @react-navigation/bottom-tabs
Copy the code

Commonly used attributes

tabBarIconSet the TAB navigation icon, including whether selected, color, font size, and so on
tabBarOptions
- activeTintColorThe title font color when selected
- inactiveTintColorThe title font color when not selected
- sizeThe font size
createBottomTabNavigatorCreates a label navigation button that returns two parametersNavigatorAnd ` Screen ` `
tabBarBadgeSets the badge and accepts string or numeric text
tabBarBadgeStyleSet the badge style

Bottom navigation case

Implement the bottom two TAB navigation HomeScreen and SettingsScreen

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1.justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1.justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

// Create TAB navigation
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
Copy the code

Customize the style of TAB navigation

Such as custom text color, text size, weight, font, selected and unselected ICONS

import * as React from 'react';
import { Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen() {
  return (
    <View style={{ flex: 1.justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1.justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route}) = >({// set tabBarIcon: ({focused, color, size}) => {let iconName; if (route.name === 'Home') { iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline'; } else if (route.name === 'Settings') { iconName = focused ? 'ios-list-box' : 'ios-list'; } // You can return any component that you like here! return<Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
Copy the code

Add badge icon

import * as React from 'react';
import { Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1.justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1.justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route}) = > ({
          tabBarIcon: ({ focused, color, size }) => {
            if (route.name === 'Home') {
              return (
                <Ionicons
                  name={
                    focused
                      ? 'ios-information-circle'// The selected icon: 'ios-information-circle-outline'// Unselected icon}size={size}
                  color={color}
                />
              );
            } else if (route.name === 'Settings') {
              return (
                <Ionicons
                  name={focused ? 'ios-list-box' : 'ios-list'}
                  size={size}
                  color={color}
                />
              );
            }
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen 
            name="Home" 
            component={HomeScreen} 
            options={{// Set the badgetabBarBadge: 3}} / >
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
Copy the code

The renderings are as follows:

Jump events

This is similar to the A label jump on the Web

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1.justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
      <Button
        title="Go to Settings"
        onPress={()= > navigation.navigate('Settings')}
      />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1.justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
      <Button title="Go to Home" onPress={()= > navigation.navigate('Home')} />
    </View>
  );
}
Copy the code

Drawer navigation

The effect is as follows:

Commonly used attributesThe document

createDrawerNavigatorCreate a drawer navigation that returns two parameters, Navigator and Screen

title

drawerLabel

drawerLabel

swiperEnabled

gestureEnabled

header

headerShow

headerTitle

headerTitleAlign

headerTitleAllowFontScaling

headerTitleStyle

headerLeft

headerPressColorAndroid

headerStyle

headerStatusBarHeight

unmountOnBlur

The event

DrawerOpen. This event is triggered when the drawer is opened

avigation.addListener('drawerOpen'.(event) = > {
    // Do something
});
Copy the code

DrawerClose This event is triggered when the drawer is closed

navigation.addListener('drawerClose'.(event) = > {
    // Do something
});
Copy the code

OpenDrawer () opens the drawer method
```
navigation.openDrawer();
Copy the code
```
CloseDrawer () closes the drawer method
```
navigation.closeDrawer();
Copy the code
```
ToggleDrawer () state switch; If closed, open the drawer pane, if open, close the drawer pane.
```
navigation.toggleDrawer();
Copy the code
```
JumpTo () jumps to the existing screen in the drawer navigator. You can take two arguments, the first is the name of the screen component to jump to, and the second is the optional pass-argument object
```
navigation.jumpTo('Profile', { owner: 'Satya' });
Copy the code
```
UseIsDrawerOpen () checks whether drawers are open. This can only be used in function components.

The sample

// drawer.tsx
import React, { Component } from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import Detail from '.. /detail/Detail';
import CustomTitleBar from '.. /custom-title-bar/CustomTitleBar';

export type DrawerParamList = {
    CustomTitleBar: undefined;
    Detail: undefined;
};

const Drawers = createDrawerNavigator<DrawerParamList>();
export default class Drawer extends Component {
    render() {
        return (
            <Drawers.Navigator initialRouteName="CustomTitleBar">
                <Drawers.Screen
                    name="CustomTitleBar"
                    component={CustomTitleBar}
                />
                <Drawers.Screen name="Detail" component={Detail} />
            </Drawers.Navigator>); }}Copy the code

// CustomTitlebar
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Button } from '@ant-design/react-native';
import { DrawerNavigationProp } from '@react-navigation/drawer';
import { DrawerParamList } from '.. /.. /pages/drawer/Drawer';

export type IProps = {
    navigation: DrawerNavigationProp<DrawerParamList>;
};

interface IState {
    isOpen: boolean;
}

export default class CustomTitleBar extends Component<IProps> {
    state: IState = {
        isOpen: false};// Respond to the open or close event of the event drawer
    handleClickOpenOrClose() {
        const { navigation } = this.props;
        navigation.toggleDrawer();
    }
  
    render() {
        const { isOpen } = this.state;
        return (
            <View>
                <Text>Custom header components</Text>
                <Button onPress={()= > this.handleClickOpenOrClose()}>
                    {isOpen ? 'close' : 'open'} drawer
                </Button>
            </View>); }}Copy the code

TAB button navigation

A simple TAB bar at the bottom of the screen lets you switch between different routes. Route lazy initialization – their screen components are not installed until they are first focused.

@react-navigation/bottom-tabs relies on @react-navigation/native

Document: Official website

Top label switch

You can switch between different routes by clicking the TAB or swiping horizontally. Transitions are animated by default. As follows:

import React, { Component } from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Home from '.. /home/Home';
import List from '.. /list/List';
import Found from '.. /found/Found';

export type TopTabParmasList = {
    Home: undefined;
    List: undefined;
    Found: undefined;
};
const Tab = createMaterialTopTabNavigator<TopTabParmasList>();

export default class TopTab extends Component {
    render() {
        return (
            <Tab.Navigator>
                <Tab.Screen name="Home" component={Home} />
                <Tab.Screen name="List" component={List} />
                <Tab.Screen name="Found" component={Found} />
            </Tab.Navigator>); }}Copy the code