Undefined не является объектом 'navigation.navigate'. Реагирует на Native Navigation 5 (NEW). - PullRequest
Новая
       75

Undefined не является объектом 'navigation.navigate'. Реагирует на Native Navigation 5 (NEW).

1 голос
/ 13 марта 2020

Я делаю навигацию с новой активной реакцией, все, что я хочу, это когда я нажимаю кнопку, она переходит к следующему экрану, я следую новой документации, но проблема в том, что я делаю с классами, и в документации вся работа выполнена с функциями в приложении. js я попытался изменить свой код соответствующим образом, но не смог сделать с классами, так как кнопка onPress не перемещается, а выдает ошибку. Это мое приложение. js: 

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer,useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Nav from './screens/Nav';
import Home from './screens/Home';
import Login from './screens/Login';
const Stack = createStackNavigator();

export default class App extends React.Component {
  render(){
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode='none' initialRouteName="Nav">
        <Stack.Screen name="Splash" component={Nav} />
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
}

Это мой Дом. js, откуда при нажатии кнопки входа в систему он переходит к следующему экрану, который является именем входа. js: 

import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableHighlight,Image,BackHandler} from 'react-native';
import Login from './Login';
export default class Home extends Component {
  render() {
const { navigation } = this.props;
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.buttonContainer} onPress={() => navigation.navigate('Login')}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>

      </View>
    );
  }
}

Это мой логин. js Экран: 

import React, { Component } from 'react';
import {StyleSheet, Text, View,TextInput,TouchableHighlight, Image} from 'react-native';
export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
          email   : '',
          password: '',
        }
      }
  render() {
    return (
      <View style={styles.container}>
      <Image source={require('../assets/logo.png')}
      style={{ width: 250, height: 250, marginHorizontal: 20 }}
                resizeMode="contain"/>
      <Text style = {styles.text}>UniQmove Training </Text> 
        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://img.icons8.com/ultraviolet/40/000000/email.png'}}/>
          <TextInput style={styles.inputs}
              placeholder="Email"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
        </View>

        <View style={styles.inputContainer}>

          <Image style={styles.inputIcon} source={{uri: 'https://img.icons8.com/ultraviolet/40/000000/password.png'}}/>
          <TextInput style={styles.inputs}
              placeholder="Password"
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(password) => this.setState({password})}/>
        </View>

        <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={() => {this.loginRoles();this.handleLogin();}}>

          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Проблема заключается в том, что я импортирую логин. js в Home, он не используется в навигационной системе. Navigate ('Login') )

Мой пакет.jason: 

{
  "name": "UniQmoves",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.7",
    "@react-navigation/native": "^5.0.9",
    "@react-navigation/stack": "^5.1.1",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "7.8.7",
    "@babel/runtime": "7.8.7",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.4",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

1 Ответ

0 голосов
/ 19 апреля 2020

есть небольшое изменение в коде, и ваш код будет работать нормально

в классе приложения initialRouteName и отображаемое имя должны измениться Spla sh на Nav 

<Stack.Navigator headerMode='none' initialRouteName="Nav">
        <Stack.Screen name="Splash" component={Nav} />

в домашнем классе обновить после использования эту строку 

import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableHighlight,Image,BackHandler} from 'react-native';
import Login from './Login';
export default class Home extends Component {
  render() {

    return (
      <View style={styles.container}>
        //<TouchableHighlight style={styles.buttonContainer} onPress={() => navigation.navigate('Login')}>

use this

<TouchableHighlight style={styles.buttonContainer} onPress={() => this.props.navigation.navigate('Login')}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>

      </View>
    );
  }
}
...