我刚刚开始学习和练习React Native,我遇到了第一个问题,我似乎无法自己解决。
我有以下代码,非常简单,但是当我在网络上运行它时,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
的 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
React Native 是一个适用于 Android、iOS 和 Web 的开源移动应用程序框架,但没有适用于 Web 的 Alert Component,但我找到了一个可以为您提供解决方案的包。安装包就这样了
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,
},
});
我发现 sweetalert2 非常灵活且易于用作 React-native-web 的
Alert.web.js
型解决方案。有关详细信息,请参阅如何在 React 应用程序中使用 Sweetalert2。
(与他们没有任何隶属关系。)