Question

无法在屏幕中导航。我正在使用Android Studio在Visual Studio代码上构建应用程序。请告诉我我是否缺少什么。出现错误：无法从“ node_modules \ react-navigation-stack \ lib \ module \ index.js”解析“ ./views/Header/Header” 我究竟做错了什么？我需要帮助。谢谢

App.js

```import React from 'react';
import { StyleSheet, Text, View, StatusBar, Platform, YellowBox} from 'react-native';

import Register from './app/components/Register';
import Login from './app/components/Login';
import MenteApr from './app/components/MenteApr';

import { createStackNavigator } from 'react-navigation-stack';

const Navigator = createStackNavigator(
 {
        initialRouteName: 'Register',
      },
  {
    Register: {
      screen: Register
    },
     Login: {
      screen: Login,
    },
    MenteApr: {
      screen: MenteApr,
      },    
    }    
);

export default class App extends React.Component {

  render(){
  return <Navigator />;
}
}```
This is the register file 
**Register.js**
```import React from 'react';
import { 
    StyleSheet, 
    Text, 
    View,
    TextInput,
    TouchableOpacity,
    Image,
    Button
} from 'react-native';

export default class Register extends React.Component {
  static navigationOptions = {
    title: 'Register',
  };
  render(){
  return(
    <View style={styles.register}>

  <Text> Welcome to MentorMe</Text>

        <Text> Sign Up </Text>

        <TextInput} placeholder = "Student ID"
        underlineColorAndroid= {'transparent'} />

        <Button
         title = "Register"
         onPress={()=>
            this.props.navigation.push('MenteApr')  } 
          />

        <View >

        <Text> Already have an account? </Text>
        <Button 
          title  = "Login"
          onPress={()=>
            this.props.navigation.navigate('Login') } 
        />
      </View>


    </View>

  );
}
}

const styles = StyleSheet.create({
  register: {
    alignSelf: 'stretch',
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#36485f',
    paddingLeft: 60,
    paddingRight: 60,
  }```
This is the Login file 
**Login.js**

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

export default class Login extends React.Component {
static navigationOptions ={
    title: "Login",
  };
  render(){

  return(
    <View style = {styles.login}>

  <Text> Welcome Back!</Text>

        <TextInput placeholder = "Student ID"
        underlineColorAndroid={'transparent'} />


<Button 
          title="Login"
          onPress ={() =>
            this.props.navigation.push('MenteApr')
            } />

        <View>
        <Text> Don't have an account? </Text>
        <Button
          title="Sign Up"
          onPress ={() =>
            this.props.navigation.navigate("Register")} 
        />
      </View>

    </View>

  );
}
}

const styles = StyleSheet.create({
    login: {
      alignSelf: 'stretch',
      flex: 1,
      justifyContent: 'center',
      backgroundColor: '#36485f',
      paddingLeft: 60,
      paddingRight: 60,
    }

Answer 1

使用此代码，我尝试修复所有问题，现在工作正常。

nmp install --save react-navigation-stack

nmp install --save react-navigation

App.js

import React from 'react';
import { StyleSheet, Text, View, StatusBar, Platform, YellowBox } from 'react-native';

import Register from './app/components/Register';
import Login from './app/components/Login';
//import MenteApr from './app/components/MenteApr';

//Import React Navigation
import { createSwitchNavigator, createAppContainer } from 'react-navigation';


//import all the screens we are going to switch 
const App = createSwitchNavigator({
    //createSwitchNavigator will not store your old screen in stack like createStackNavigator
    //So all the screen that comes in createSwitchNavigator will appear once in a whole session
    Register: { screen: Register },
    Login: { screen: Login },
});
export default createAppContainer(App);

Login.js

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

export default class Login extends React.Component {
    static navigationOptions = {
        title: "Login",
    };
    render() {

        return (
            <View style={styles.login}>

                <Text> Welcome Back!</Text>

                <TextInput placeholder="Student ID"
                    underlineColorAndroid={'transparent'} />


                <Button
                    title="Login"
                    onPress={() =>
                        this.props.navigation.push('MenteApr')
                    } />

                <View>
                    <Text> Don't have an account? </Text>
                    <Button
                        title="Sign Up"
                        onPress={() =>
                            this.props.navigation.navigate("Register")}
                    />
                </View>

            </View>

        );
    }
}

const styles = StyleSheet.create({
    login: {
        alignSelf: 'stretch',
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#36485f',
        paddingLeft: 60,
        paddingRight: 60,
    }
});

Register.js

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

export default class Register extends React.Component {
    static navigationOptions = {
        title: 'Register',
    };
    render() {
        return (
            <View style={styles.register}>

                <Text> Welcome to MentorMe</Text>

                <Text> Sign Up </Text>

                <TextInput placeholder = "Student ID"
        underlineColorAndroid= {'transparent'} />

        <Button
                    title="Register"
                    onPress={() =>
                        this.props.navigation.push('MenteApr')}
                />

                <View >

                    <Text> Already have an account? </Text>
                    <Button
                        title="Login"
                        onPress={() =>
                            this.props.navigation.navigate('Login')}
                    />
                </View>


            </View>

        );
    }
}

const styles = StyleSheet.create({
    register: {
        alignSelf: 'stretch',
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#36485f',
        paddingLeft: 60,
        paddingRight: 60,
    }
});

Answer 2

使用带有以下命令的终端在您的项目中安装for (int line = 0; line < n; ++line) { for (int column = 0; column < n; ++column) { // only that need to run in new thread multiply_line_per_column(line, column); } }。

react-navigation-stack

更新：

在您的任何文件中，可能都有nmp install --save react-navigation-stack的导入然后将其删除或使用特定路径添加适当的导入。

无法在屏幕之间导航。反应本机

2 个答案: