反应本机按钮单击重定向屏幕错误答案

【问题标题】：react native button click redirect screen error反应本机按钮单击重定向屏幕错误
【发布时间】：2021-08-16 19:01:54
【问题描述】：

大家好，我想在屏幕之间导航，所以在我的函数组件中我使用了 useNavigation，但在我的类组件中我不能使用它，因为它是一个反应钩子，我如何在没有使用导航的情况下单击按钮时做到这一点

这是我的按钮组件

 <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() {


}

【问题讨论】：

标签： reactjs react-native navigation native

【解决方案1】：

你可以像官方文档中所说的here那样使用。

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} />;
}

【讨论】：