个性化阅读
专注于IT技术分析

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

输出

React Native Alert

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

React Native Alert按钮
赞(0)
未经允许不得转载:srcmini » React Native Alert组件 – React Native实战教程

评论 抢沙发

评论前必须登录!