react本机按钮点击重定向屏幕错误

Question

大家好，我想在屏幕之间导航，所以在我的功能组件中我使用了导航，但在我的类组件中我不能使用它，因为它是一个反应挂钩，如果不使用导航，我怎么能在按钮点击时做到这一点

这是我的按钮组件

<TouchableOpacity style={{
backgroundColor: "#2a2e4a",
width: width - 40,
alignItems: 'center',
padding: 10,
borderRadius: 5,
margin: 20,
}}
>
<Text style={{
fontSize: 24,
fontWeight: "bold",
color: 'white'
}}>
PAGAR
</Text>
</TouchableOpacity>

这就是我想要实现的重定向页面的功能

handlePayClick() {

}

Answer 1

您可以按照官方文档中的说明使用。

import { TouchableOpacity, Text } from 'react-native';
import React from 'react';
import { useNavigation } from '@react-navigation/native';
class MyBackButton extends React.Component {
handlePayClick() {
// Get it from props
const { navigation } = this.props;
navigation.navigate('YourScreenName');
}
render() {
return (
<TouchableOpacity
style={{
backgroundColor: '#2a2e4a',
width: 40,
alignItems: 'center',
padding: 10,
borderRadius: 5,
margin: 20,
}}>
<Text
style={{
fontSize: 24,
fontWeight: 'bold',
color: 'white',
}}>
PAGAR
</Text>
</TouchableOpacity>
);
}
}
// Wrap and export
export default function (props) {
const navigation = useNavigation();
return <MyBackButton {...props} navigation={navigation} />;
}