我正在用新的本机响应进行导航,我只想在按下按钮时导航到下一个屏幕,所以我遵循了新文档,但问题是我正在使用不同的类,并且在文档中使用功能来完成在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>
);
}
}
我现在想要的是,当它单击登录按钮时,它将移至下一个屏幕,但它给了我错误,例如找不到变量导航。
这是因为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>
);
}
}
您应该将导航道具传递给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>
);
}
}