React Native Alert组件 – React Native实战教程

上一章React Native实战教程请查看：React Native Text组件

在本章中，我们将了解如何创建自定义Alert组件。

步骤1：App.js

import React from 'react';
import AlertExample from './alert_example.js';

const App = () => {
  return <AlertExample />;
};
export default App;

步骤2：alert_example.js

我们将创建一个按钮来触发showAlert函数。

import React from 'react';
import {Alert, Text, TouchableOpacity, StyleSheet} from 'react-native';

const AlertExample = () => {
  const showAlert = () => {
    Alert.alert('You need to...');
  };
  return (
    <TouchableOpacity onPress={showAlert} style={styles.button}>
      <Text>Alert</Text>
    </TouchableOpacity>
  );
};
export default AlertExample;

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#4ba37b',
    width: 100,
    borderRadius: 50,
    alignItems: 'center',
    marginTop: 100,
  },
});

输出

当你点击按钮时，你会看到以下内容