React Native 0.5无需createStackNavigator切换视图报错求助

你遇到的错误很明确：代码里调用了this.props.navigation.navigate，但既没配置任何导航容器，而且你本身也不想用导航组件，所以this.props.navigation自然是undefined，才会抛出类型错误。

下面是完全不依赖导航库，仅用React组件状态来实现视图切换的方案：

核心思路是用一个父组件维护当前要显示的视图状态，通过切换状态来渲染对应的屏幕组件，完全不需要导航功能。

完整代码示例：

import React from 'react';
import { View, Text, Button } from 'react-native';

// 欢迎视图组件
class HomeScreen extends React.Component {
  render() {
    // 接收父组件传递的切换方法
    const { onSwitchToSignIn } = this.props;
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Welcome!</Text>
        <Button title="Sign In" onPress={onSwitchToSignIn} />
      </View>
    );
  }
}

// 登录视图组件
class SignInScreen extends React.Component {
  render() {
    // 如果需要返回欢迎页，也可以接收返回方法
    const { onSwitchToHome } = this.props;
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Sign In screen</Text>
        {/* 可选：添加返回按钮 */}
        <Button title="Back to Welcome" onPress={onSwitchToHome} />
      </View>
    );
  }
}

// 根组件，负责管理视图切换状态
class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态，默认显示欢迎页
    this.state = {
      currentScreen: 'home'
    };
  }

  // 切换到登录页的方法
  switchToSignIn = () => {
    this.setState({ currentScreen: 'signIn' });
  };

  // 切换回欢迎页的方法（可选）
  switchToHome = () => {
    this.setState({ currentScreen: 'home' });
  };

  render() {
    const { currentScreen } = this.state;
    // 根据当前状态渲染对应的组件
    return (
      <View style={{ flex: 1 }}>
        {currentScreen === 'home' ? (
          <HomeScreen onSwitchToSignIn={this.switchToSignIn} />
        ) : (
          <SignInScreen onSwitchToHome={this.switchToHome} />
        )}
      </View>
    );
  }
}

export default App;

关键细节说明：

• 新增了根组件App，用currentScreen状态控制显示哪个视图
• HomeScreen通过props接收父组件的切换方法，点击按钮时更新状态完成视图切换
• 如果需要从登录页返回欢迎页，同样可以通过props传递返回方法实现
• 整个实现完全不需要任何导航库，纯靠React的状态管理完成视图切换

这样修改后，你就能在两个视图间自由切换，完全符合你“不使用导航功能”的需求啦。

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