Question

我正在尝试构建测试登录页面。在此页面中，如果用户按'LOGIN' 按钮然后应用程序应显示警告对话框。如果用户仅在对话框中选择'YES'，则应用应导航到下一页。

问题

当我在'YES'按钮的点击事件上调用导航器时，没有任何事情发生。我在上课，我错过了什么？但是，如果我从按钮点击它，它可以正常工作。

代码段

import Style from '../Style';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,TextInput,Alert,
  Navigator,
  TouchableOpacity,
  View,Linking ,ToastAndroid,
  ScrollView
} from 'react-native';

export default class Login extends Component {

  constructor(props) {
   super(props);
   this.state = { text: 'Search Movies' };
   this.goToHome = this.goToHome.bind(this);
 }

    goToHome() {
    ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
     this.props.navigator.push({
        name: 'Home',
        title: 'Home',
        openMenu: this.openMenu
     });
  }

  showConfirmationDialog(){
          Alert.alert(
                'FingerPrint Authentication',
                'Would you like to authenticate using fingerprint ?',
                [
                  {text: 'Yes', onPress: () => {ToastAndroid.showWithGravity('Ticket Booked :D',ToastAndroid.SHORT, ToastAndroid.CENTER);}},
                  {text: 'No', onPress: () => { this.goToHome}},
                  {text: 'Cancel', onPress: () =>console.log('Cancelled'), style: 'cancel'},
                ],
                  { cancelable: false }
                  )
                }

  render() {

    return (

      <View style={Style.container}>
      <ScrollView style={Style.plot}>

              <Text style={Style.welcome}>
                 Sign In
                </Text>

               <View style={Style.settings}/>

               <Text style={Style.label}>
              User Name
               </Text>

              <TextInput
                 style={Style.input}
                 onChangeText={(text) => this.setState({text})}
                 value={this.state.text}
               />

               <Text style={Style.label}>
              Password
               </Text>

              <TextInput
                 style={Style.input}
                 onChangeText={(text) => this.setState({text})}
                 value={this.state.text}
               />

       <View style={Style.buttonContainer}>
         <TouchableOpacity
           onPress= { this.showConfirmationDialog}
           activeOpacity={0.7}
           style={Style.buttonClose}>
           <Text style={Style.buttonText}>Login</Text>
         </TouchableOpacity>
       </View>

    </ScrollView>
    </View>
    );
  }
}

AppRegistry.registerComponent('Login', () => Login);

如果我在LOGIN按钮中将onPress= { this.showConfirmationDialog}更改为onPress= { this.goToHome}，则它可以正常工作，但不能在对话框的确定按钮上。

React Native Navigator，警报不起作用

0 个答案: