React导航挂钩在Class组件中未按预期工作

Question

我正在尝试使用react导航在Selecttype.js和doctorlogin.js两个页面之间移动，其中Selecttype.jss是initialRouteName，当有人单击它时，它有一个按钮将重定向到doctorlogin.js。initialRoute加载良好，但我无法使用onclick()事件访问doctorlogin-js。

App.js:(路由器(

import React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Selecttype from './components/selecttype'
import DoctorLogin from './components/doctorlogin'
const Stack = createStackNavigator();
class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Selecttype">
<Stack.Screen name="Selecttype" component={Selecttype} />
<Stack.Screen name="Dlogin" component={DoctorLogin} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
export default App;

Selecttype.js：(初始路线(

import React from 'react';
import { Button, StyleSheet, Text, View, } from 'react-native';
import { useNavigation } from '@react-navigation/native';
export default class Selecttype extends React.Component { 
doctorlogin(){
var navigation = useNavigation();
navigation.navigate('Dlogin')
}
patientlogin(){
var navigation = useNavigation();
navigation.navigate('Plogin')
}
render(){
return (<>
<Text style={{fontSize: 24, fontWeight: "bold", textAlign: "center", position: "relative", top: 159}}>Select who you are:</Text>
<View style={styles.selectbtnsa}>
<Button title="Doctor" onPress={this.doctorlogin}/>
</View>
<View style={styles.selectbtnsb}>
<Button title="Patient" onPress={this.patientlogin}/>
</View>
</>);
}
}
const styles = StyleSheet.create({
selectbtnsa: {
position: "relative",
top: 189,
borderRadius: 20,
borderColor: "black",
},
selectbtnsb: {
position: "relative",
top: 199,
borderRadius: 10,
borderColor: "black",
},
});

Doctorlogin.js:

import React from 'react'
import {Text, StyleSheet, View, TextInput, Button} from 'react-native'
import firebase from 'firebase'
import '../configs/firebase'
import { useNavigation } from '@react-navigation/native';
export default class Doctorlogin extends React.Component {

constructor(props){
super(props);
this.state = {
name: "",
code: "",
}
this.handleName = this.handleName.bind(this);
this.handleCode = this.handleCode.bind(this);
}
dlogin = () => {
return firebase.database().ref(this.state.name).once('value').then((snapshot) => {
var dcode = (snapshot.val() && snapshot.val().code)

if(dcode === this.state.code){
const navigation = useNavigation();
navigation.navigate('Dhome')
}else{
alert("You entered the wrong code")
}    
});
}

handleName(e) {
this.setState({
name: e.target.value
});
}
handleCode(e) {
this.setState({
code: e.target.value
});
}
render(){
return(<>
<Text style={{fontSize: 24, fontWeight: "bold", textAlign: "center", position: "relative", top: 159}}>Doctor Login:</Text>
<View style={styles.selectbtnsa}>
<TextInput placeholder=" Enter your Name..." style={{height: 30}} onChange={this.handleName}/>
</View>
<View style={styles.selectbtnsb}>
<TextInput placeholder=" Enter your 8-digit code..." style={{height: 30}} onChange={this.handleCode}/>
</View>
<View style={styles.selectbtnsc}>
<Button title="Login" onPress={this.dlogin}/>
</View> 
</>)
}
}
const styles = StyleSheet.create({
selectbtnsa: {
position: "relative",
top: 189,
borderRadius: 20,
borderColor: "black",
},
selectbtnsb: {
position: "relative",
top: 199,
borderRadius: 10,
borderColor: "black",
},
selectbtnsc: {
position: "relative",
top: 209,
left: 3,
borderRadius: 10,
borderColor: "black",
},
});

我将非常感谢你的帮助。

Answer 1

钩子不能在类组件中使用，如reactjs.org 上的钩子常见问题解答中所述

你不能在类组件中使用Hook，但你可以在一个树中混合类和函数组件与Hook。组件是使用Hooks的类还是函数是该组件的实现细节。从长远来看，我们预计Hooks将成为人们编写React组件的主要方式。

链接：https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes或两者的混合