Как перемещаться между экранами при нажатии кнопки в React Native Navigation 5.0.9 (New) - PullRequest
Новая
       65

Как перемещаться между экранами при нажатии кнопки в React Native Navigation 5.0.9 (New)

0 голосов
/ 12 марта 2020

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

import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableHighlight,Image,BackHandler} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Login from './Login';
const Stack = createStackNavigator();

function NavRules() {
  return (
    <NavigationContainer>
      <Stack.Navigator >
        <Stack.Screen  component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default class Home extends Component {
  render({navigation}) {
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.buttonContainer} onPress={() => navigation.navigate('Login')}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>

      </View>
    );
  }
}

Теперь я хочу, чтобы он нажимал на кнопку «Вход» и двигался к следующему экрану, но он выдает ошибку, например, не могу найти переменную навигацию.

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

Вы должны передать реквизиты навигации в функцию NavRules. И Вы должны дать имя вашему стеку экрана, к которому вы переходите. Я отредактировал ваши коды, вы можете проверить ниже. 

function NavRules({navigation}) {
  return (
    <NavigationContainer>
      <Stack.Navigator >
        <Stack.Screen name="Login"  component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
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>
    );
  }
}
0 голосов
/ 12 марта 2020

Это потому, что navigation передается на экран как props, а не как параметр метода render.

Кроме того, я не вижу компонент Home в вашей конфигурации навигации. Где NavRules() называется?

Попробуйте вместо этого: 

export default class Home extends Component {
    render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight style={styles.buttonContainer} onPress={() => this.props.navigation.navigate('Login')}>
                    <Text style={styles.loginText}>Login</Text>
                </TouchableHighlight>
            </View>
        );
    }
}
...