**探索React Native新天地 —— react-native-prompt-android**
import React from 'react';
import { View, Text, Button } from 'react-native';
import RNPrompt from 'react-native-prompt-android'; // 引入react-native-prompt-android库
export default class App extends React.Component {
// 在组件内部定义一个状态变量来控制提示框的显示
state = { visible: false };
// 显示提示框的方法
showPrompt = () => this.setState({ visible: true });
// 隐藏提示框的方法
hidePrompt = () => this.setState({ visible: false });
// 处理提示框中的确认按钮点击事件
onConfirm = (text) => {
// 在这里处理确认操作
console.log('Confirmed: ', text);
this.hidePrompt();
};
// 处理提示框中的取消按钮点击事件
onCancel = () => {
// 在这里处理取消操作
console.log('Canceled');
this.hidePrompt();
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button title="Show Prompt" onPress={this.showPrompt} />
<RNPrompt
visible={this.state.visible}
title="Prompt Title"
placeholder="Type something"
onCancel={this.onCancel}
onConfirm={this.onConfirm}
/>
</View>
);
}
}
这段代码展示了如何在React Native应用中使用react-native-prompt-android
库来创建一个可以输入文本的提示框。它包括了如何在组件的状态下控制提示框的显示与隐藏,以及如何处理提示框中的按钮点击事件。
评论已关闭