ReactNative (Expo)로 Confirm 대화 상자를 발행

7015 단어 reactnative
아무래도 react-native-simple-dialogs 라고 하는 것 같고, Confirm 외에 보통의 다이얼로그, Progress라든지 낼 수 있는 것 같기 때문에 시험해 본다.

구현



우선 최근 필요한 Confirm 다이얼로그를 꺼내 본다.
아무래도 View 안에 를 써 두고, 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>
        );
    }
}

문제 결과



여러가지 사용할 수 있을 것 같다.

좋은 웹페이지 즐겨찾기