布局

布局是用于一致地管理会在多个页面重复出现的 UI 元素（页眉、导航栏、页脚等）的结构。定义公共布局后，可以减少代码重复，并提供一致的用户体验。

创建布局文件

布局是 _layout.tsx 通过创建文件来定义的。根据文件的位置，适用范围会有所不同。

import { PropsWithChildren } from "react";

export default function Layout({ children }: PropsWithChildren) {
  return <>{children}</>;
}

设置布局适用范围

布局会根据文件路径自动应用。

• pages/_layout.tsx：全局应用于所有页面。
• pages/about/_layout.tsx: intoss://{服务名}/about ：仅应用于其下的所有页面。

布局可以嵌套使用。多个布局同时存在时，会按照从上级目录布局开始的顺序依次应用。

pages/
├── _layout.tsx          // 全局布局
├── about/
│   ├── _layout.tsx     // about 区块布局
│   ├── index.tsx       // about 主页面
│   └── team.tsx        // 团队介绍页面
└── index.tsx           // 主页面

例如，如果是上述结构 about/team.tsx 页面会按以下顺序应用布局。

1. pages/_layout.tsx （全局布局）
2. pages/about/_layout.tsx （区块布局）
3. pages/about/team.tsx （实际页面组件）

这样构成后，可以将全局所需的 UI 元素与仅在特定区块中需要的 UI 元素分开管理。

布局示例

全局布局

我们来创建一个适用于所有页面的公共布局。

pages/_layout.tsx

import { PropsWithChildren } from "react";
import { View } from "react-native";
import { Header } from "../components/Header";
import { Footer } from "../components/Footer";

export default function Layout({ children }: PropsWithChildren) {
  return (
    <View style={{ flex: 1 }}>
      <Header />
      {children}
      <Footer />
    </View>
  );
}

components/Header.tsx

import { View, Text, StyleSheet } from "react-native";

export function Header() {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>我的应用</Text>
      <View style={styles.nav}>
        <Text style={styles.navItem}>首页</Text>
        <Text style={styles.navItem}>介绍</Text>
        <Text style={styles.navItem}>设置</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    padding: 16,
    backgroundColor: "#ffffff",
    borderBottomWidth: 1,
    borderBottomColor: "#e5e5e5",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 8,
  },
  nav: {
    flexDirection: "row",
    gap: 16,
  },
  navItem: {
    fontSize: 16,
    color: "#666666",
  },
});

components/Footer.tsx

import { View, Text, StyleSheet } from "react-native";

export function Footer() {
  return (
    <View style={styles.footer}>
      <Text style={styles.copyright}>© 2024 我的应用。保留所有权利。</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  footer: {
    padding: 16,
    backgroundColor: "#f5f5f5",
    alignItems: "center",
  },
  copyright: {
    fontSize: 14,
    color: "#666666",
  },
});

按区块划分的布局

可以创建只在特定区块中使用的布局。

pages/about/_layout.tsx

import { PropsWithChildren } from "react";
import { View } from "react-native";
import { AboutSidebar } from "../../components/AboutSidebar";

export default function AboutLayout({ children }: PropsWithChildren) {
  return (
    <View style={{ flexDirection: "row" }}>
      <AboutSidebar />
      <View style={{ flex: 1 }}>{children}</View>
    </View>
  );
}

components/AboutSidebar.tsx

import { View, Text, StyleSheet } from "react-native";

export function AboutSidebar() {
  return (
    <View style={styles.sidebar}>
      <Text style={styles.title}>关于</Text>
      <View style={styles.menu}>
        <Text style={styles.menuItem}>公司介绍</Text>
        <Text style={styles.menuItem}>团队介绍</Text>
        <Text style={styles.menuItem}>沿革</Text>
        <Text style={styles.menuItem}>来访路线</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  sidebar: {
    width: 200,
    padding: 16,
    backgroundColor: "#f8f9fa",
    borderRightWidth: 1,
    borderRightColor: "#e5e5e5",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    marginBottom: 16,
  },
  menu: {
    gap: 12,
  },
  menuItem: {
    fontSize: 16,
    color: "#495057",
  },
});

从布局中获取查询参数

布局中也可以使用查询参数。 useParams 借助这个 Hook，可以读取当前界面的参数并动态使用。

useParams Hook 使用示例

下面的示例会获取通过 URL 查询参数传入的 title 值，并将其显示为界面顶部标题。

pages/_layout.tsx

import { useParams } from "@granite-js/react-native";
import { PropsWithChildren } from "react";
import { View, Text } from "react-native";

export default function Layout({ children }: PropsWithChildren) {
  // 获取当前界面的参数。
  const params = useParams({ strict: false });

  // 获取 'title' 参数并设置默认值。
  const title = params?.title ?? "默认标题";

  return (
    <View style={{ flex: 1 }}>
      {/* 动态生成的页眉 */}
      <View style={{ padding: 16, backgroundColor: "#f0f0f0" }}>
        <Text style={{ fontSize: 20, fontWeight: "bold" }}>{title}</Text>
      </View>
      {/* 渲染子组件 */}
      <View style={{ flex: 1 }}>{children}</View>
    </View>
  );
}

参考文档

• 页面跳转
• 使用查询参数