ReactNative(Expo)でConfirmダイアログを出す

どうやらreact-native-simple-dialogsというのあるらしく、Confirmの他に普通のダイアログ、Progressとかも出せるみたいなので試してみる。

実装

とりあえず直近必要なConfirmダイアログをを出してみる。
どうやらViewの中に<ConfirmDialog>を書いておき、visibleをstateで制御するようだ。

App.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { ConfirmDialog } from 'react-native-simple-dialogs';

export default class App extends React.Component {

    state = {
        dialogVisible: false,
    }
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>App</Text>
                <Button
                    title="実行"
                    onPress={() => this.setState({ dialogVisible: true })}
                />
                <ConfirmDialog
                    title="確認画面"
                    message="本当に実行しますか？"
                    visible={this.state.dialogVisible}
                    onTouchOutside={() => this.setState({ dialogVisible: false })}
                    positiveButton={{
                        title: 'はい',
                        onPress: () => {
                            // alert('OK')
                            this.setState({ dialogVisible: false });
                            console.log('OK');
                            // alert('OK');
                        }
                    }}
                    negativeButton={{
                        title: 'いいえ',
                        onPress: () => this.setState({ dialogVisible: false })
                    }}
                // overlayStyle={{ backgroundColor:"#eee"}}
                />
            </View>
        );
    }
}

事項結果

いろいろ使えそう。