![](/img/trans.png)
[英]Alert.alert not working in React native iOS, but perfectly fine in Android
[英]React Native Alert.alert() only works on iOS and Android not web
我剛開始學習和練習 React Native,我遇到了第一個我自己似乎無法解決的問題。
我有以下代碼,非常簡單,但是當我在 web 上運行時,Alert.alert() 不起作用。 如果我單擊該按鈕,則沒有任何反應,但是,當我單擊 iOS 或 android 模擬器上的按鈕時,它工作正常。
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, Button, View, Alert } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.headerStyle} >Practice App</Text>
<Text style={{padding: 10}}>Open up App.js to start working on your app!</Text>
<Button
onPress={() => alert('Hello, Nice To Meet You :)')}
title="Greet Me"
/>
<StatusBar style="auto" />
</View>
);
}
我也知道 alert() 適用於所有三個設備,但是,我想了解為什么 Alert.alert() 僅適用於 iOS 和 Android。
我的問題更多是為了理解而不是找到解決方案。 是使用 alert() 的唯一解決方案,還是我以錯誤的方式實現 Alert.alert()?
React Native is an open-source mobile application framework for Android, iOS and Web but there is not an Alert Component for Web but I have found a package which will provide you solutation. 那就是安裝package
npm i react-native-awesome-alerts
這個例子會幫助你
import React from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import Alert from "react-native-awesome-alerts";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { showAlert: false };
}
showAlert = () => {
this.setState({
showAlert: true,
});
};
hideAlert = () => {
this.setState({
showAlert: false,
});
};
render() {
const { showAlert } = this.state;
return (
<View style={styles.container}>
<Text>Practice App</Text>
<Text style={{ padding: 10 }}>
Open up App.js to start working on your app!
</Text>
<TouchableOpacity
onPress={() => {
this.showAlert();
}}
>
<View style={styles.button}>
<Text style={styles.text}>Greet Me</Text>
</View>
</TouchableOpacity>
<Alert
show={showAlert}
message="Hello, Nice To Meet You :"
closeOnTouchOutside={true}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#fff",
},
button: {
margin: 10,
paddingHorizontal: 10,
paddingVertical: 7,
borderRadius: 5,
backgroundColor: "#AEDEF4",
},
text: {
color: "#fff",
fontSize: 15,
},
});
此解決方法基本上模仿react-native
的Alert
行為與瀏覽器的window.confirm
方法:
# alert.js
import { Alert, Platform } from 'react-native'
const alertPolyfill = (title, description, options, extra) => {
const result = window.confirm([title, description].filter(Boolean).join('\n'))
if (result) {
const confirmOption = options.find(({ style }) => style !== 'cancel')
confirmOption && confirmOption.onPress()
} else {
const cancelOption = options.find(({ style }) => style === 'cancel')
cancelOption && cancelOption.onPress()
}
}
const alert = Platform.OS === 'web' ? alertPolyfill : Alert.alert
export default alert
用法:
前:
import { Alert } from 'react-native'
Alert.alert(...)
后:
import alert from './alert'
alert(...)
來源和學分: https://github.com/necolas/react-native-web/issues/1026#issuecomment-679102691
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.