时间戳

首页 > 解决方案 > 反应本机按钮单击重定向屏幕错误

reactjs - 反应本机按钮单击重定向屏幕错误

问题描述

嗨，伙计们，我想在屏幕之间导航，所以在我的功能组件中我使用了 useNavigation ，但是在我的类组件中我不能使用它，因为它是一个反应钩子，我如何在没有 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() {


}

标签： reactjsreact-nativenavigationnative

解决方案

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

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

推荐阅读