React Stack Navigator传参异常与导航跳转失效问题排查

嘿，我来帮你排查下为啥点击图标没反应——核心问题出在导航路由的注册和props传递上，咱们一步步来修正：

1. 主导航栈没注册FilterScreen（最关键的错误） #

你在Home.js里的StackNavigator只注册了DiscoverScreen，完全没把FilterScreen加进去！navigation.navigate('FilterScreen')自然找不到这个路由，所以点击没反应。

2. 自定义Header组件的props传递错误 #

你在navigationOptions里直接写header: TopNavBar，这样TopNavBar拿不到navigation等关键props，导致props.navigation是undefined，就算路由注册了也没法跳转。

3. FilterScreen没必要单独套StackNavigator #

你给FilterScreen单独做了一个StackNavigator完全多余，会造成导航层级混乱，直接导出组件就行。

修正后的完整代码 #

第一步：修改Home.js的主导航栈 #

把FilterScreen导入并注册到主Stack里，同时用函数式的navigationOptions来传递props给TopNavBar：

import { StackNavigator } from 'react-navigation';
import DiscoverScreen from './discover-things';
import TopNavBar from './discover-things/top-nav-bar';
// 导入FilterScreen组件（注意路径要和你的实际文件一致）
import FilterScreen from './FilterScreen/view';

export default StackNavigator({
  DiscoverScreen: {
    screen: DiscoverScreen,
    // 用函数形式的navigationOptions，获取navigation等props传给TopNavBar
    navigationOptions: ({ navigation }) => ({
      header: <TopNavBar navigation={navigation} />
    }),
  },
  // 注册FilterScreen路由
  FilterScreen: {
    screen: FilterScreen,
    navigationOptions: { header: null }
  }
});

第二步：修正TopNavBar组件 #

确保正确接收navigation props，这里可以直接解构出来，避免props undefined的问题：

import React from 'react';
import { View, Text, Alert } from 'react-native'; // 别忘了导入View和Text！
import Icon from 'react-native-vector-icons/Ionicons'; // 补全你实际使用的图标库

export default ({ navigation }) => ( 
  <View style={styles.navbarContainer}>
    <View style={[styles.titleContainer, globalStyles.verticallyBottom]}>
      <Text style={styles.discoverTitle}> Discover </Text>
    </View>
    <View style={[styles.toolsContainer, globalStyles.verticallyBottom]}>
      <View style={[styles.toolsInnerContainer, globalStyles.verticallyBottom]}>
        <Icon name="search" size={25} style={styles.icon} />
        <Icon 
          name="sliders" 
          size={25} 
          style={styles.icon} 
          onPress={() => navigation.navigate('FilterScreen')} 
        />
      </View>
    </View>
  </View>
);

// 补全你的样式定义
const styles = {
  navbarContainer: { flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15, height: 60 },
  titleContainer: { flex: 1 },
  discoverTitle: { fontSize: 20, fontWeight: 'bold' },
  toolsContainer: { flexDirection: 'row', gap: 20 },
  icon: { color: '#333' }
};

第三步：简化FilterScreen的导出 #

删掉单独的StackNavigator，直接导出组件：

// ./FilterScreen/view.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default () => (
  <View style={styles.container}>
    <Text>这是筛选页面！</Text>
  </View>
);

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
});

这样修改后，点击滑块图标就能正常跳转到FilterScreen啦～

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