如何在React Native Navigation 5.0.9(新建)中在屏幕的onPress按钮之间导航

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

我正在用新的本机响应进行导航,我只想在按下按钮时导航到下一个屏幕,所以我遵循了新文档,但问题是我正在使用不同的类,并且在文档中使用功能来完成在App.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>
    );
  }
}

我现在想要的是,当它单击登录按钮时,它将移至下一个屏幕,但它给了我错误,例如找不到变量导航。

react-native react-navigation react-native-navigation
2个回答
0
投票

这是因为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>
        );
    }
}

-1
投票

您应该将导航道具传递给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>
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.