React Native Alert.alert() 仅适用于 iOS 和 Android,不适用于 Web

问题描述 投票:0回答:3

我刚刚开始学习和练习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()?

android ios react-native web alert
3个回答
13
投票

此解决方法基本上模仿了

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


3
投票

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,
  },
});


0
投票

我发现 sweetalert2 非常灵活且易于用作 React-native-web 的

Alert.web.js
型解决方案。有关详细信息,请参阅如何在 React 应用程序中使用 Sweetalert2。

(与他们没有任何隶属关系。)

© www.soinside.com 2019 - 2024. All rights reserved.