React Native中父组件向子组件传递导航Props问题求助

嘿，我完全懂这种明明到处都有教程但自己上手就卡壳的感觉！作为新手踩这种路由配置的坑太正常了，别着急，咱们一步步来把你的代码补全跑起来。

首先，先帮你把中断的路由配置补完整，注意React Navigation 2.x版本（你用的StackNavigator和TabNavigator是这个版本的API）的写法：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './src/Components/Login/Login.js'
import {StackNavigator, TabNavigator} from 'react-navigation'
import Signup from './src/Components/Signup/Signup.js'
import Router from './src/Components/BodyPages/Router.js'
import Form from './src/Components/Form/Form.js'

// 先定义Tab导航（如果你的Router是Tab页的核心组件）
const MainTabs = TabNavigator({
  Home: { screen: Router },
  Form: { screen: Form },
  // 可根据需求添加更多Tab项
}, {
  // Tab导航的基础配置
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: '#e91e63',
    style: {
      backgroundColor: '#fff',
      borderTopWidth: 0.5,
      borderTopColor: '#eee'
    },
  },
});

// 再定义全局的Stack导航，包含登录、注册和Tab主页面
const AppNavigator = StackNavigator({
  Login: { screen: Login },
  Signup: { screen: Signup },
  Main: { screen: MainTabs },
}, {
  // Stack导航的默认配置
  initialRouteName: 'Login', // 初始页面设为登录页
  headerMode: 'screen', // 保留页面头部，设为'none'可隐藏
});

// 导出App根组件
export default class App extends React.Component {
  render() {
    return <AppNavigator />;
  }
}

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

再给你几个新手容易踩的坑提示：

• 确保你安装了对应版本的依赖：npm install react-navigation@2.x react-native-gesture-handler react-native-reanimated（别装最新的5+版本，API完全不兼容）
• 所有页面组件（Login、Signup等）要记得用export default导出，不然路由找不到组件
• 页面内跳转要用this.props.navigation.navigate('RouteName')，比如登录成功后跳转到Main

如果你的实际需求不是这样（比如不需要Tab导航，只是纯Stack路由），可以告诉我具体场景，我再帮你调整！

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