栈式导航配置 - 元素码农

发布时间: 2025-03-23 08:18

↑

# 栈式导航配置

本文将详细介绍React Native中栈式导航的配置和使用方法。栈式导航是最基本也是最常用的导航方式,通过掌握其配置方法,你将能够构建出清晰的应用页面层级结构。

## 栈式导航概述

栈式导航的特点:

- 页面以栈的形式管理
- 支持页面间的前进和后退
- 可自定义转场动画
- 支持页面参数传递

## 基础配置

### 1. 安装依赖

```bash
npm install @react-navigation/native-stack
```

### 2. 创建导航器

```javascript
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      >
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: '首页' }}
        />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
          options={{ title: '详情' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

## 页面配置

### 1. 基本页面

```javascript
function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Details Screen</Text>
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}
```

### 2. 动态标题

```javascript
function DynamicScreen({ navigation }) {
  const [count, setCount] = useState(0);

useLayoutEffect(() => {
    navigation.setOptions({
      title: `计数: ${count}`,
    });
  }, [navigation, count]);

return (
    <View style={styles.container}>
      <Text>Count: {count}</Text>
      <Button
        title="Increment"
        onPress={() => setCount(c => c + 1)}
      />
    </View>
  );
}
```

## 导航操作

### 1. 基本导航

```javascript
// 导航到新页面
navigation.navigate('RouteName');

// 返回上一页
navigation.goBack();

// 返回到指定页面
navigation.navigate('RouteName');

// 重置导航栈
navigation.reset({
  index: 0,
  routes: [{ name: 'Home' }],
});
```

### 2. 参数传递

```javascript
// 发送参数
navigation.navigate('Details', {
  itemId: 86,
  title: '商品详情',
});

// 接收参数
function DetailsScreen({ route }) {
  const { itemId, title } = route.params;

return (
    <View style={styles.container}>
      <Text>Item ID: {itemId}</Text>
      <Text>Title: {title}</Text>
    </View>
  );
}
```

## 页面样式

### 1. 标题栏样式

```javascript
<Stack.Navigator
  screenOptions={{
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerBackTitle: '返回',
    headerBackTitleVisible: false,
  }}
>
  {/* 屏幕配置 */}
</Stack.Navigator>
```

### 2. 转场动画

```javascript
<Stack.Screen
  name="Details"
  component={DetailsScreen}
  options={{
    animation: 'slide_from_right', // 默认
    // 或自定义动画
    animation: 'fade_from_bottom',
    // 禁用动画
    animation: 'none',
  }}
/>
```

## 高级特性

### 1. 手势返回

```javascript
<Stack.Navigator
  screenOptions={{
    gestureEnabled: true,
    gestureDirection: 'horizontal',
  }}
>
  {/* 屏幕配置 */}
</Stack.Navigator>
```

### 2. 模态页面

```javascript
<Stack.Screen
  name="Modal"
  component={ModalScreen}
  options={{
    presentation: 'modal',
    animation: 'slide_from_bottom',
  }}
/>
```

### 3. 透明背景

```javascript
<Stack.Screen
  name="Overlay"
  component={OverlayScreen}
  options={{
    headerShown: false,
    cardStyle: { backgroundColor: 'transparent' },
    presentation: 'transparentModal',
  }}
/>
```

## 最佳实践

1. 导航结构组织
```javascript
// navigation/types.ts
export type RootStackParamList = {
  Home: undefined;
  Details: { id: string };
  Profile: { userId: string };
};

// navigation/RootNavigator.tsx
const RootStack = createNativeStackNavigator<RootStackParamList>();

export function RootNavigator() {
  return (
    <RootStack.Navigator>
      <RootStack.Screen name="Home" component={HomeScreen} />
      <RootStack.Screen name="Details" component={DetailsScreen} />
      <RootStack.Screen name="Profile" component={ProfileScreen} />
    </RootStack.Navigator>
  );
}
```

2. 页面预加载
```javascript
function HomeScreen({ navigation }) {
  // 预加载Details页面
  useEffect(() => {
    navigation.prefetch('Details');
  }, [navigation]);

return (
    <View style={styles.container}>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}
```

3. 性能优化
```javascript
<Stack.Navigator
  screenOptions={{
    headerShown: false, // 如果使用自定义头部
    animation: 'none', // 如果不需要动画
  }}
>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{
      // 避免不必要的重渲染
      headerTitle: () => <LogoTitle />,
    }}
  />
</Stack.Navigator>
```

## 参考资源

- [React Navigation官方文档](https://reactnavigation.org/docs/stack-navigator)
- [Native Stack Navigator API](https://reactnavigation.org/docs/native-stack-navigator)
- [Navigation最佳实践](https://reactnavigation.org/docs/navigation-best-practices)

通过本文的学习,你应该已经掌握了:

1. 栈式导航的基本概念
2. 导航器的配置方法
3. 页面间的导航操作
4. 参数传递机制
5. 高级特性的使用

记住,良好的导航体验是应用用户体验的重要组成部分。在实际开发中,要根据具体需求选择合适的导航配置,并注意性能优化。