尝试使用 'Navigator' 从登录路由到主页但出现错误

Question

第二张截图包含我试过的代码。下面是我试过的完整代码。

index.android.js的代码：

import React, { Component } from 'react';
import {
  AppRegistry,
  Navigator
} from 'react-native';
import Login from './Components/Login';
import Home from './Components/Home';

class Routing extends Component {
  render() {
    return (
      <Navigator
        initialRoute = {{
          id: 'Login'
        }}
        renderScene={
          this.navigatorRenderScene
        }
      />
    );
  }
  navigatorRenderScene(route, navigator) {
    _navigator = navigator;
    switch(route.id) {
      case 'Login':
      return(<Login navigator={navigator}
      title="Login" />);
      case 'Home':
      return(<Home navigator={navigator}
      title="Home" />);
    }
  }
}

AppRegistry.registerComponent('AwesomeProject', () => Routing);

Login.js的代码：

import React, { Component } from 'react';
import {
  Text,
  Image,
  View,
  Button,
  StyleSheet,
  TextInput,
  Linking,
  Alert
} from 'react-native';

export default class LoginPage extends Component {
  _onSubmit() {
    this.props.navigator.push({
      id:'Home'
    });
  }
  render() {
    return (
      <View style={styles.containerView}>
        <Text style={styles.loginText}>
          Username or Email
        </Text>
        <TextInput style={styles.inputFields}
          placeholder="e.g: abc@example.com" />
        <Text style={styles.loginText}>
          Password
        </Text>
        <TextInput style={styles.inputFields}
          placeholder="Password"
          secureTextEntry={true} />
        <Text style={{color: 'blue', marginBottom: 10}}
          onPress={() => Linking.openURL('https://www.google.co.in')}>
          Forgot Password?
        </Text>
        <Button
            onPress={this._onSubmit.bind(this)}
            title="Login"
            style={styles.loginButton}
            accessibilityLabel="Ok, Great!"
          />
      </View>
    );
  }
};

const styles= StyleSheet.create({
  containerView: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ffebcd',
    borderStyle: 'solid',
    borderColor: '#000000'
  },
  loginText: {
    fontSize: 20,
    marginBottom: 10
  },
  inputFields: {
    fontSize: 20,
    borderStyle: 'solid',
    borderColor: '#000000',
    borderRadius: 30,
    marginBottom: 10
  },
  loginButton: {
    backgroundColor: '#34A853'
  }
});

Home.js的代码：

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

class Home extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native Hello World!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

module.exports = 'Home';

Answer 1

编辑：
class Home extends Component { 也需要导出：

export default class Home extends Component {

这是因为您正在使用 named exports，文档在这里：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

此外：

export default class LoginPage extends Component {

应该是：

export default class Login extends Component {

命名事物时，它们需要保持一致。

--------------------------------
您收到的错误可能是因为：

class Routing extends Component {

应该是：

export default class Routing extends Component {

_navigator = navigator; 行什么都不做。

如果你想将函数设为私有，你应该这样做：

    export default class Routing extends Component {
      constructor(props){
        super(props);
      }
      _navigatorRenderScene(route, navigator) {
       Do stuff...
      }

  render(){
    return(
      Do stuff...
    );
  }
}

我把函数移到了render方法上面，因为它更容易阅读，而且很约定俗成。

尝试使用 'Navigator' 从登录路由到主页但出现错误

Trying to route from login to home page using 'Navigator' but got error

navigator

react-native