从警报消息导航到其他屏幕

Question

我是本机反应的新手，我正在构建一个应用程序，该应用程序将使用指纹对用户进行身份验证，如果成功，将通过警报消息上显示的按钮导航到下一个屏幕。但我无法导航。 我收到警报消息弹出窗口以及弹出窗口上的按钮。但是按钮功能 (Alert.alert('Authenticated Successfully','', [{text: 'Proceed', onPress:() => this.props.navigation.navigate('Main')} ] )) 没有按预期工作。

这里是特定屏幕的代码sn-p：-

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ImageBackground, Alert } from 'react-native';
import TouchID from 'react-native-touch-id';

export default class FingerPrintScreen extends React.Component {
  render() {
    return (
      <ImageBackground style={{ flex: 1, width: null, height: null, resizeMode: 'cover'}} source={{ uri: 'https://jooinn.com/images/white-clouds-25.jpg' }}>
        <View style={stylesLogin.LoginScreenView}>
          <Text style={{ textAlign: 'center', top: '10%', fontFamily: 'Arial', fontSize: 30, color: '#0143B8', fontWeight: 'bold'}}>Authenticate using Fingerprint.</Text>
          <TouchableOpacity activeOpacity={0.55} style={ stylesLogin.HomeButton } onPress={() => this.props.navigation.popToTop('Home')}>
            <Text style={{ textAlign:'center', fontFamily: 'Arial', fontSize: 30, color: '#FFFFFF', fontWeight: 'bold'}}>Go to Home</Text>
          </TouchableOpacity>
          <TouchableOpacity activeOpacity={0.55} style={stylesLogin.FingerPrintButton} onPress={this.clickHandler}>
            <Text style={{ textAlign: 'center', fontFamily: 'Arial', fontSize: 30, color: '#FFFFFF', fontWeight: 'bold' }}>Click Here to Authenticate using Fingerprint</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    );
  }
  clickHandler() {
    TouchID.isSupported()
    .then( authenticate() )
    .catch( error => {
      Alert.alert( 'Biometric not supported' )
    })
  }
}
  
function authenticate() {
  return TouchID.authenticate()
  .then( success => {
      Alert.alert('Authenticated Successfully',' Click Proceed to Continue', [{text: 'Proceed', onPress:() => this.props.navigation.navigate('Main')}] )
    })
    .catch(error => {
      Alert.alert(error.message);
  })
}

我无法这样做，因为身份验证功能位于组件之外。 谢谢你

Answer 1

您将看到您可以从任何组件访问导航，只要它在路由文件中（stackNavigator ...）。 身份验证组件是您的孩子，因此您没有直接导航。您可以通过执行 this.props 的 console.log 来验证这一点

首先，对我来说最好的解决方案

解决方法很简单：如果父亲可以访问 this.props.navigation 就可以在调用组件时传给孩子，如下：

        <ChildComponent navigation={this.props.navigation} />

另一种解决方案虽然复杂得多，但包含以下内容： 首先在父组件中创建一个函数：

functionPass = () => {}

在这个函数中你可以执行 this.props.navigation

然后你将它传递给子组件，正如我之前告诉你的那样，在那里执行 this.props 和你给你的名字将调用父亲的函数，但正如我所说，我推荐第一个选项

Answer 2

由于你的函数在组件之外，你不会在那里得到道具，请将道具传递给函数，如下面的代码所示。

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ImageBackground, Alert } from 'react-native';
import TouchID from 'react-native-touch-id';

export default class FingerPrintScreen extends React.Component {
  render() {
    return (
      <ImageBackground style={{ flex: 1, width: null, height: null, resizeMode: 'cover'}} source={{ uri: 'https://jooinn.com/images/white-clouds-25.jpg' }}>
        <View style={stylesLogin.LoginScreenView}>
          <Text style={{ textAlign: 'center', top: '10%', fontFamily: 'Arial', fontSize: 30, color: '#0143B8', fontWeight: 'bold'}}>Authenticate using Fingerprint.</Text>
          <TouchableOpacity activeOpacity={0.55} style={ stylesLogin.HomeButton } onPress={() => this.props.navigation.popToTop('Home')}>
            <Text style={{ textAlign:'center', fontFamily: 'Arial', fontSize: 30, color: '#FFFFFF', fontWeight: 'bold'}}>Go to Home</Text>
          </TouchableOpacity>
          <TouchableOpacity activeOpacity={0.55} style={stylesLogin.FingerPrintButton} onPress={this.clickHandler}>
            <Text style={{ textAlign: 'center', fontFamily: 'Arial', fontSize: 30, color: '#FFFFFF', fontWeight: 'bold' }}>Click Here to Authenticate using Fingerprint</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    );
  }
  clickHandler() {
    TouchID.isSupported()
    .then(()=> authenticate(this.props))
    .catch( error => {
      Alert.alert('Biometric not supported' )
    })
  }
}

function authenticate(props) {
  return TouchID.authenticate()
  .then( success => {
      Alert.alert('Authenticated Successfully','', [{text: 'Proceed', onPress:() => props.navigation.navigate('Main')}] )
    })
    .catch(error => {
      Alert.alert(error.message);
  })
}

如果它仍然不工作，请检查按钮单击是否工作，在按钮单击而不是函数调用上放置一个警报。并通过参考下面的原始文档链接来正确设置警报的语法。

https://facebook.github.io/react-native/docs/alert