今天周六休息一下，放空一下大脑，简单思考一下expo导航实现思路。

        我现在回忆一下，我们从创建导航开始，首先呢，我知道router是一个库，导入stack这个方法？然后latout,tsx和index.tsx是基本文件，相当于我们创建应用程序app的页面以及导航，index是入口文件，启动程序后默认打开index然后通过layout.tsx自动加载出导航栏，比如我们添加页面直接加一个文件about.tsx然后我们就需要在latout中用stack.screen用name和title都是about来告诉rounter我加了一个页面，以及添加了对应的导航栏标题。

        然后导航栏比如我现在说一个案例吧，建立一个底层tabs导航栏，然后实现三个页面然后隐藏上层导航栏，首先我需要在app路径下设立一个新文件夹，然后取名为tabs，然后为tabs添加index.tsx文件以及setting.tsx以及about.tsx

        这是 Expo Router 的嵌套路由机制：app/tabs/index.tsx 表示 /tabs 页面；其它则是 /tabs/setting、/tabs/about。

        然后在文件中添加默认渲染文本为自己对应的文件名，app路径下的layout默认返回stack/就可以了但是关键在于在app/index中把首页路径指向tabs。

         “app/layout.tsx 默认返回 <Stack />，但我们想隐藏上层导航栏。”

// app/layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }} />
  );
}

          
        让打开 app 默认就是进入 tabs 导航页面，而不是默认的 app/index.tsx 内容

      // app/index.tsx
import { Redirect } from 'expo-router';

export default function Home() {
  return <Redirect href="/tabs" />;
}

             然后router会自动识别我们要用tabs底层导航栏来构建页面，以及在tabs/layout中用stack.screen来自定义导航栏的标题，然后就实现了底层导航栏的应用程序。

                创建底部导航的 tabs/layout.tsx

                

// app/tabs/_layout.tsx（注意是 _layout 而不是 layout）
import { Tabs } from 'expo-router';

export default function TabsLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: '首页' }} />
      <Tabs.Screen name="about" options={{ title: '关于我们' }} />
      <Tabs.Screen name="setting" options={{ title: '设置' }} />
    </Tabs>
  );
}

                

        使用 <Tabs> 而不是 <Stack>，表示这个目录（tabs）要使用底部导航栏，文件名是 _layout.tsx，带下划线，是 expo-router 的约定写法，不能写成 layout.tsx，每个子页面可以单独配置 title、tabBarIcon 等属性。

        总结一下

                

创建 tabs 目录和页面文件

tabs/index.tsx 是默认 tab 页

在 app/index.tsx 重定向

使用 <Redirect href="/tabs" />

隐藏上层导航栏

app/layout.tsx 中设置 headerShown: false

设置底部导航栏

使用 app/tabs/_layout.tsx，使用 <Tabs /> 包裹

设置 tab 页标题

在 <Tabs.Screen name="xxx" options={{ title }} />

                

        现在我们拿出完整的代码

import { Tabs } from 'expo-router';

import Ionicons from '@expo/vector-icons/Ionicons';


export default function TabLayout() {
  return (
    <Tabs
    screenOptions={{
      tabBarActiveTintColor: '#ffd33d',
      headerStyle: {
        backgroundColor: '#25292e',
      },
      headerShadowVisible: false,
      headerTintColor: '#fff',
      tabBarStyle: {
      backgroundColor: '#25292e',
      },
    }}
  >
  
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, focused }) => (
            <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
          ),
        }}
      />
      <Tabs.Screen
        name="about"
        options={{
          title: 'About',
          tabBarIcon: ({ color, focused }) => (
            <Ionicons name={focused ? 'information-circle' : 'information-circle-outline'} color={color} size={24}/>
          ),
        }}
      />
    </Tabs>
  );
}

               大概还是比较简单的，我在理解代码的时候更多的时候是样式属性的复习以及记录。

                

tabBarActiveTintColor

设置当前激活页面的 Tab 图标和文字颜色（这里是亮黄色 #ffd33d）

headerStyle.backgroundColor

设置导航栏背景色

headerShadowVisible: false

隐藏导航栏的阴影（让界面更平滑）

headerTintColor: '#fff'

设置导航栏上的返回箭头、标题颜色为白色

tabBarStyle.backgroundColor

设置底部 Tab 栏的背景颜色

name="index"

关联到 app/tabs/index.tsx 页面，作为“首页”

title: 'Home'

设置在导航栏 & 底部标签显示的标题为 “Home”

tabBarIcon

渲染底部导航栏的图标

        ok，样式的属性以及功能放在这里，希望大家和我一样可以坚持学习，当然不要忘记休息。