Question

我是本机的新手，我正在构建一个应用程序，该应用程序将使用指纹对用户进行身份验证，如果成功，则将通过警报消息上显示的按钮导航到下一个屏幕。但是我无法导航。我在弹出警报消息以及弹出按钮。但是按钮功能（ Alert.alert（'Authenticated成功地'，''，[{文本：'继续'，onPress :(）=> this.props.navigation.navigate（'Main'）} ]） ）无法正常工作。

以下是特定屏幕的代码段：-

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

im无法这样做，因为authenticate函数位于组件外部。谢谢

Answer 1

由于您的函数位于组件之外，因此您无法在此处获得道具，请按照以下代码所示将道具传递给函数。

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

Answer 2

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

首先是我最好的解决方案

解决方案非常简单：如果父亲可以访问this.props.navigation，则可以在调用组件时将其传递给孩子，如下所示：

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

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

functionPass = () => {}

在此功能内，您可以执行此操作。props.navigation

然后按照我之前告诉您的方式将其传递给子组件，然后执行此操作。props和您给定的名称将从父亲那里调用该函数，但正如我所说，我建议第一个选择

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

2 个答案: