如何阻止 Alert Api 使我的 React 本机应用程序崩溃？答案

【问题标题】：how do stop Alert Api from crashing my React native app?如何阻止 Alert Api 使我的 React 本机应用程序崩溃？
【发布时间】：2020-07-29 20:31:58
【问题描述】：

我正在尝试通过 Alert API 将 URL 链接到 TouchableOpacity 组件，这使用户可以选择取消链接或继续前进。但是，当我将该功能分配给 onpress 方法并按下该方法时，它会使我的应用程序崩溃。有解决办法吗？

这是我的代码

import React from 'react';
import { Image, Text, Linking, TouchableOpacity, View,ImageBackground, Alert } from 'react-native'
import styles from './styles';
import { firebase } from '../../firebase/config';
import { auth } from 'firebase';
import {Spacer} from '../spacer';



export default function ProductScreen({navigation}){

    const logOutPress = () => {
        auth()
        .signOut()
        .then(() => { navigation.navigate("Login"),
        alert('You have signed out')})
    }

   const yalaPress = () =>  Alert.alert( "You're about to leave the app",[
    { text: "Cancel",
        onPress: ()=> console.log('Cancel Pressed')},
    {text: "Ok", 
        onPress: () => Linking.openURL('http://yalajets.com/')
    }],{ cancelable: false }  );


    return(
<ImageBackground source={require('../../../assets/backgroundCopySilk.jpg')} style={styles.backgroundImage}>
<View style={styles.container}>

<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Luxury Commercial Lawn Care</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Luxury Vehicle Car Detail</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Luxury Pharmaceuticals</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Luxury Personal Fitness</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Luxury Massage with Catch These Hands</Text>
</TouchableOpacity>

<TouchableOpacity 
onPress={yalaPress}
style={styles.button}>
<Text style={styles.buttonText}>Luxury Private Flights with Yala Jets</Text>
</TouchableOpacity>

<Spacer/>
<TouchableOpacity
onPress={()=> logOutPress()}>
<Text style={styles.buttonText}>Log Out</Text>
</TouchableOpacity>
        </View>
</ImageBackground>
    )
};

【问题讨论】：

试试 https url
不，那没用

标签： react-native

【解决方案1】：

将yalaPress 更改为：

const yalaPress = () => {
  Alert.alert(
    'Warning',
    "You're about to leave the app",
    [
      {text: 'Cancel', onPress: () => console.log('Cancel Pressed!')},
      {text: 'OK', onPress: () => Linking.openURL('http://yalajets.com/')},
    ],
    {cancelable: false},
  );
};

还将您调用 yalaPress 的方式更改为：

onPress={() => yalaPress()}

警报崩溃的原因是警报需要标题和消息。您只传递了一个标题，并且消息是必需的。

【讨论】：