上一章React
Native实战教程请查看：React
Native Text组件
【React Native Alert组件 –
React Native实战教程】在本章中，我们将了解如何创建自定义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 Geolocation地理定位 – React Native实战教程
- React Native Text组件 – React Native实战教程
- React Native Switch组件 – React Native实战教程
- React Native状态栏Status Bar – React Native实战教程
- React Native选择器Picker – React Native实战教程
- React Native活动指示器ActivityIndicator – React Native实战教程
- React Native模态框Modal – React Native实战教程
- React Native WebView使用 – React Native实战教程
- React Native视图View元素 – React Native实战教程