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

Question

我是本机反应的新手，我正在构建一个应用程序，该应用程序将使用指纹对用户进行身份验证，如果成功，将通过警报消息上显示的按钮导航到下一个屏幕。但我无法导航。 我收到警报消息弹出窗口以及弹出窗口上的按钮。但是按钮功能(Alert.alert('Authentication'，''，[{text： 'Continue'， 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 无法这样做，因为身份验证功能位于组件 外部。 谢谢

Answer 1

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

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

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

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

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

functionPass = () => {}

在此函数中，您可以执行此操作。

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

Answer 2

由于您的函数在组件之外，因此您将无法在那里获得 props，请将 props 传递给函数，如下面的代码所示。

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