React Native实现从登录页跳转至Tab导航页面的方法

我看了你的代码，现在的问题出在导航结构的设置上——你把App组件本身作为StackNavigator的一个页面，这会导致循环引用和跳转逻辑混乱。咱们来一步步修正：

1. 调整App.js的导航结构 #

首先，我们需要把LoginPage和RootNavigation作为根导航的两个独立页面，而不是把App组件嵌套进去。修改后的App.js如下：

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font } from 'expo';
import { Ionicons } from '@expo/vector-icons';
import RootNavigation from './navigation/RootNavigation';
import LoginPage from './screens/LoginPage';
import { createStackNavigator, createAppContainer } from 'react-navigation';

// 创建根导航：登录页 -> 主导航页
const RootStack = createStackNavigator(
  {
    Login: { screen: LoginPage },
    Main: { screen: RootNavigation }
  },
  {
    initialRouteName: 'Login', // 设置启动页为LoginPage
    headerMode: 'none' // 隐藏默认头部，不需要的话可以删除这行
  }
);

const AppContainer = createAppContainer(RootStack);

export class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <AppContainer />
        </View>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require('./assets/images/robot-dev.png'),
        require('./assets/images/robot-prod.png'),
      ]),
      Font.loadAsync({
        ...Ionicons.font,
        'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
      }),
    ]);
  };

  _handleLoadingError = error => {
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

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

export default App;

这里的关键变化：

• 创建RootStack统一管理登录页和主导航页的路由
• 用createAppContainer包装导航（React Navigation 3+版本必须）
• 设置initialRouteName: 'Login'确保启动页是登录页
• 移除了原来错误的嵌套App组件的路由配置

2. 修改LoginPage.js的跳转逻辑 #

现在跳转目标路由名称是Main，需要更新导航参数：

import React from 'react';
import {Image, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View, Button} from 'react-native';

export default class LoginPage extends React.Component {
  static navigationOptions={
    title:'Login Page'
  };

  NavigateActivityFunction = () => {
    // 跳转路由改为'Main'，对应RootStack里的路由名称
    this.props.navigation.navigate('Main');
  }

  render(){
    return(
      <View style={styles.container}>
        <Button title='进入主页面' onPress={this.NavigateActivityFunction}/>
      </View>
    );
  }
}

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

3. 确认RootNavigation.js的结构 #

你的RootNavigation.js已经正确引入了MainTabNavigator，不需要修改，它会作为Main路由的页面展示底部Tab导航。如果MainTabNavigator.js的代码有截断，记得补全它的内容，确保底部Tab能正常渲染。

补充说明 #

如果你的React Navigation版本是2.x，createAppContainer可以省略，直接把RootStack作为默认导出即可，但推荐使用最新版本的语法。

这样调整后，启动应用会先显示LoginPage，点击按钮就会跳转到包含MainTabNavigator的RootNavigation页面了。

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