在屏幕之间导航时遇到麻烦。 React Native

问题描述 投票:0回答:1

无法在屏幕内导航。我正在使用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,
    }
android reactjs react-native react-native-android
1个回答
0
投票

使用带有以下命令的终端在项目中安装react-navigation-stack

nmp install --save react-navigation-stack

更新:

在您的任何文件中,可能都有./views/Header/Header的导入然后将其删除或使用特定路径添加适当的导入。

© www.soinside.com 2019 - 2024. All rights reserved.