RN路由

Wesley13
• 阅读 578

##引言 本来打算将React Navigation-Guides这一章内容集中写在这篇文章内的,但由于篇幅太长,阅读的时候很费劲,所以这里将Guides这一章的内容分篇来记录。首先,我们来看看Tab navigation!

##Tab navigation 移动应用中最常见的导航样式可能是基于标签的导航。 它可以是屏幕底部的标题,也可以是标题下方的顶部(甚至代替标题)。

本指南介绍createBottomTabNavigator。 您也可以使用createMaterialBottomTabNavigator和createMaterialTopTabNavigator将选项卡添加到您的应用程序。

在继续之前,请先安装@ react-navigation / bottom-tabs:

  • npm

    npm install @react-navigation/bottom-tabs

  • yarn

    yarn add @react-navigation/bottom-tabs

1 基于标签的导航的最小示例

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>
  );
}

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>
  );
}

Try this example on Snack

2 自定义外观

这类似于自定义stack导航器的方式—初始化tab导航器时会设置一些属性,而其他属性则可以在options中按屏幕自定义。

// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';

// (...)

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          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>
  );
}

Try this example on Snack

让我们对此进行剖析:

  • tabBarIcon是底部标签导航器中受支持的option。 因此,我们知道可以在options prop的屏幕组件上使用它,但在这种情况下,选择将其放在Tab.Navigator的screenOptions prop中,以便于集中图标配置,便于使用。
  • tabBarIcon是一个具有焦点状态,颜色和大小参数的函数。 如果您进一步浏览配置,将会看到tabBarOptions以及activeTintColor和inactiveTintColor。 这些默认值是iOS平台默认值,但是您可以在此处更改它们。 传递到tabBarIcon的颜色是活动的还是不活动的,具体取决于聚焦状态(聚焦为活动)。 大小是标签栏期望的图标大小。
  • 阅读 full API reference 参考,以获取有关createBottomTabNavigator配置options的更多信息。

3 icons上添加badge

有时我们想在某些图标上添加badge。 一种常见的方法是使用一个额外的视图容器,并以绝对定位的方式设置badge元素。

function IconWithBadge({ name, badgeCount, color, size }) {
  return (
    <View style={{ width: 24, height: 24, margin: 5 }}>
      <Ionicons name={name} size={size} color={color} />
      {badgeCount > 0 && (
        <View
          style={{
            // On React Native < 0.57 overflow outside of parent will not work on Android, see https://git.io/fhLJ8
            position: 'absolute',
            right: -6,
            top: -3,
            backgroundColor: 'red',
            borderRadius: 6,
            width: 12,
            height: 12,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
            {badgeCount}
          </Text>
        </View>
      )}
    </View>
  );
}

从UI角度来看,该组件已准备就绪,可以使用,但是您仍然需要找到某种方法从其他地方正确传递徽章计数,例如使用 React ContextReduxMobX 或 event emitters.

function HomeIconWithBadge(props) {
  // You should pass down the badgeCount in some other ways like React Context API, Redux, MobX or event emitters.
  return <IconWithBadge {...props} badgeCount={3} />;
}

Try this example on Snack

4 tabs之间跳转

切换tab使用同样的API - navigation.navigate。

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>
  );
}

Try this example on Snack

5 每个tab上的stack导航

通常,tab上不仅显示一个页面,例如,在您的Twitter feed上,您可以点击一条推文,将会跳转到这个tab里包含的一个新页面。 您可以认为这是因为每个tab中都有单独的导航堆栈,这正是我们在React Navigation中建模的方式。

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

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

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

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

const HomeStack = createStackNavigator();

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

const SettingsStack = createStackNavigator();

function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Try this example on Snack

6 为什么要用TabNavigator代替TabBarIOS或其他一些组件

尝试使用独立的tab bar组件而不将其集成到您在应用程序中使用的导航库中是很常见的。在某些情况下,这很好!但是,应该警告您,这样做时可能会遇到一些令人沮丧的意外问题。

例如,React Navigation的标签导航器会为您处理Android后退按钮,而独立组件通常不会。此外,如果您(作为开发人员)需要为其调用两个不同的API,则执行诸如“跳至该选项卡,然后转到此屏幕”之类的操作更加困难。最后,移动用户界面有许多小的设计细节,要求某些组件知道其他组件的布局或存在性-例如,如果您具有半透明的标签栏,则内容应在其下方滚动,并且滚动视图应具有插图在底部等于标签栏的高度,因此您可以看到所有内容。双击选项卡栏,应使活动导航堆栈弹出到堆栈顶部,再次进行操作应将活动滚动视图滚动到该堆栈顶部。尽管并非所有这些行为都可以通过React Navigation开箱即用地实现,但是如果使用独立的选项卡视图组件,它们将是实现的,并且您将不会获得任何这些行为。

7 tab导航器包含一个stack,想在特定屏幕上隐藏tab bar

See the documentation here

总结

这部分内容主要讲的是tab navigation的使用方法,使用这个组件可以很方便的设置tab导航的结构,也易于扩展和维护,熟悉的朋友应该也有同感!在设置badge上,需要另外去研究一下,后续补充这部分内容。

喜欢的朋友,麻烦点个star哦,谢谢啦~

上一章节:RN路由-React Navigation组件5.x-基本原理(中文文档)

下一章节:RN路由-React Navigation--Drawer navigation

参考文档:React Navigation - Tab navigation

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
1个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这