React Native：如何为@react-navigation底部标签栏实现页面跳转与参数传递

嘿，我来帮你搞定这个问题！其实用官方的@react-navigation/bottom-tabs根本不需要手动加点击事件——它本身就封装好了标签点击跳转的逻辑，咱们只要把原来的页面和状态适配到导航体系里就行，一步步来：

1. 先搞懂官方导航的核心逻辑 #

你之前用switch case手动控制页面渲染，而createBottomTabNavigator已经帮你做了路由管理：每个Tab.Screen对应一个页面，点击底部标签时，导航库会自动切换到对应的组件页面，完全不需要你自己写点击事件处理函数。

2. 把原有页面接入导航体系 #

原来的Login、Articles这些页面，需要调整成适配导航的形式，同时你原来的setPage方法可以直接替换成导航自带的navigation.navigate。另外，如果你需要传递setLastItem、currentIndex这类共享状态，有两种方式：

方式一：通过Tab.Screen的children传递自定义Props #

因为直接用component属性的话，导航只会给组件传递navigation和route两个内置参数，如果你要传自己的状态或方法，就用children来手动渲染组件并传递Props：

import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Login from './Login';
import Articles from './Articles';
import Register from './Register';
import GotoSearch from './SearchItem';
import GiveDirection from './GiveDirection';
import Navigation from './Navigation';

const Tab = createBottomTabNavigator();

class App extends Component {
  // 保留你原来需要共享的状态和方法
  state = {
    currentIndex: null,
    lastItem: { latitude: 0, longitude: 0 }
  };

  setCurrentIndex = (id) => {
    this.setState({ currentIndex: id });
  };

  setLastItem = (item) => {
    this.setState({ lastItem: item });
  };

  render() {
    return (
      <NavigationContainer>
        <Tab.Navigator>
          {/* 替换成你实际需要的标签和页面 */}
          <Tab.Screen 
            name="Articles" 
            options={{ title: '文章' }}
            children={() => (
              <Articles 
                navigation={this.props.navigation}
                setLastItem={this.setLastItem} 
                lastItem={this.state.lastItem} 
              />
            )} 
          />
          <Tab.Screen 
            name="Search" 
            options={{ title: '搜索' }}
            children={() => (
              <GotoSearch 
                navigation={this.props.navigation}
                currentIndex={this.state.currentIndex} 
                setCurrentIndex={this.setCurrentIndex} 
              />
            )} 
          />
          <Tab.Screen 
            name="Route" 
            options={{ title: '导航' }}
            children={() => (
              <Navigation 
                navigation={this.props.navigation}
                setLastItem={this.setLastItem} 
                lastItem={this.state.lastItem} 
              />
            )} 
          />
          <Tab.Screen 
            name="Login" 
            options={{ title: '登录' }}
            component={Login} 
          />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }
}

export default App;

方式二：页面间跳转时携带参数 #

如果只是在跳转某个页面时临时传递数据（比如从Articles跳转到GiveDirection时传参数），直接用navigation.navigate的第二个参数就行：

// 在Articles页面里跳转的代码
this.props.navigation.navigate('GiveDirection', {
  lastItem: this.props.lastItem,
  currentIndex: someIndex
});

然后在目标页面GiveDirection里，通过route.params获取参数：

// GiveDirection.js里获取参数
class GiveDirection extends Component {
  render() {
    // 用可选链避免参数不存在时报错
    const { lastItem, currentIndex } = this.props.route.params || {};
    return (
      // 你的页面内容
    );
  }
}

3. 替换原有页面的setPage逻辑 #

原来的setPage("articles")这种调用，直接改成this.props.navigation.navigate("Articles")就行——导航库会自动帮你切换到对应的标签页面，不需要你再手动管理page状态了。

比如原来的Login页面里：

// 原来的代码
<Button onPress={() => this.props.setPage("articles")} title="进入文章页" />

// 改成导航的方式
<Button onPress={() => this.props.navigation.navigate("Articles")} title="进入文章页" />

4. 关于全局共享状态的优化 #

如果你的currentIndex、lastItem需要在多个页面频繁共享和修改，建议用React Context或者Redux来做全局状态管理，这样比通过Props层层传递更方便。不过如果只是少数页面用到，用上面的Props传递方式也完全没问题。

内容的提问来源于stack exchange，提问作者mealuc