react-native 中的自定義警報控件

Question

我正在開發 react-native 應用程序並嘗試制作自定義警報方法（如 react-native 官方網站中給出的 Alert.alert()）。 React-native 警報沒有字體大小和背景顏色的樣式屬性，當我在 android 選項卡上使用時警報非常小，但在 android 掃描儀和移動設備中使用時它工作正常。

enter code here

import React, { Component } from 'react';
import { StyleSheet, Platform, View, Text,TouchableOpacity } from 'react-native'; 
// import PropTypes from 'prop-types';
// import Dialog from "react-native-dialog";
 import Alertfunction from './src/CustomAlert'




 export default class App extends Component{

    render() {

      return (

        <Alertfunction Title={"Alert"} FontSize = {30} FontColor= '#FF9800'  Visible={true}/>


      );
    }
  }


const styles = StyleSheet.create({

 MainContainer :{

  flex:1,
  paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  alignItems: 'center',
  justifyContent: 'center',

  }

});





customAlert.js



import React, { Component } from 'react';
import { StyleSheet, Platform, View, Text,TouchableOpacity } from 'react-native'; 
import PropTypes from 'prop-types';
import Dialog from "react-native-dialog";

class Alertfunction extends Component {
    state = {
        dialogVisible: this.props.Visible
      };

      showDialog = () => {
        this.setState({ dialogVisible: this.props.Visible });
      };

      handleCancel = () => {
         this.setState({ dialogVisible: false });
        // this.props.Visible=false;
      };

      handleDelete = () => {
         this.setState({ dialogVisible: false });
        //this.props.Visible=false;
      };

  render() {

    return (

            <View>
                <TouchableOpacity onPress={this.showDialog}>
                <Text >{this.props.Title}</Text>
                </TouchableOpacity>
                <Dialog.Container visible={this.state.dialogVisible}>
                <Dialog.Title style={{fontSize : this.props.FontSize, color: this.props.FontColor}}>{this.props.Title}</Dialog.Title>
                <Dialog.Description style={{fontSize : this.props.FontSize, color: this.props.FontColor}}>
                    Do you want to delete this account? You cannot undo this action.
                </Dialog.Description>
                <Dialog.Button style={{fontSize : this.props.FontSize, color: this.props.FontColor}} label="Cancel" onPress={this.handleCancel} />
                <Dialog.Button style={{fontSize : this.props.FontSize, color: this.props.FontColor}} label="ok" onPress={this.handleDelete} />
                </Dialog.Container>
            </View>

    );
  }
 }

export default Alertfunction;
Alertfunction.propTypes =
{
    Title: PropTypes.string,
  FontSize: PropTypes.number,
  FontColor: PropTypes.string,
  Visible: PropTypes.bool,

}

Alertfunction.defaultProps =
{
    Title: "Default Name",
  FontColor: "#00E676",
  FontSize: 15,
  Visible:false
}

const styles = StyleSheet.create({

 MainContainer :{

  flex:1,
  paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  alignItems: 'center',
  justifyContent: 'center',



  }

});

Answer 1

您需要在父組件中聲明方法並作為道具傳遞，如下所示：並使用這些方法更新 dialogVisible 的值。

import React, { Component } from 'react';
import { StyleSheet, Platform, View, Text,TouchableOpacity } from 'react-native'; 
import Alertfunction from './src/CustomAlert'

 export default class App extends Component{
      this.state = {
        dialogVisible: true;
      }
      showDialog = () => {
        this.setState({ dialogVisible: this.props.Visible });
      };

      handleCancel = () => {
         this.setState({ dialogVisible: false });
      };

      handleDelete = () => {
         this.setState({ dialogVisible: false });
      };
    render() {
      const { dialogVisible } = this.state;
      return (

        <Alertfunction 
            Title={"Alert"} 
            FontSize = {30} 
            FontColor= '#FF9800'  
            Visible={dialogVisible}
            showDialog={this.showDialog}
            handleCancel={this.handleCancel}
            handleDelete={this.handleDelete}
        />


      );
    }
  }


const styles = StyleSheet.create({

 MainContainer :{

  flex:1,
  paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  alignItems: 'center',
  justifyContent: 'center',

  }

});

並在子組件中調用這些方法來更新dialogVisible 的值

你的子組件應該是這樣的：

customAlert.js

import React, { Component } from 'react';
import { StyleSheet, Platform, View, Text,TouchableOpacity } from 'react-native'; 
import PropTypes from 'prop-types';
import Dialog from "react-native-dialog";

class Alertfunction extends Component {
  render() {
    const { Visible } = this.props;
    return (

            <View>
                <TouchableOpacity onPress={this.props.showDialog}>
                <Text >{this.props.Title}</Text>
                </TouchableOpacity>
                <Dialog.Container visible={Visible}>
                <Dialog.Title style={{fontSize : this.props.FontSize, color: this.props.FontColor}}>{this.props.Title}</Dialog.Title>
                <Dialog.Description style={{fontSize : this.props.FontSize, color: this.props.FontColor}}>
                    Do you want to delete this account? You cannot undo this action.
                </Dialog.Description>
                <Dialog.Button style={{fontSize : this.props.FontSize, color: this.props.FontColor}} label="Cancel" onPress={this.props.handleCancel} />
                <Dialog.Button style={{fontSize : this.props.FontSize, color: this.props.FontColor}} label="ok" onPress={this.props.handleDelete} />
                </Dialog.Container>
            </View>

    );
  }
 }

export default Alertfunction;
Alertfunction.propTypes =
{
    Title: PropTypes.string,
  FontSize: PropTypes.number,
  FontColor: PropTypes.string,
  Visible: PropTypes.bool,

}

Alertfunction.defaultProps =
{
    Title: "Default Name",
  FontColor: "#00E676",
  FontSize: 15,
  Visible:false
}

const styles = StyleSheet.create({

 MainContainer :{

  flex:1,
  paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  alignItems: 'center',
  justifyContent: 'center',



  }

});

Answer 2

我通過在此處創建自定義控件來解決此問題是鏈接

在此處輸入圖片說明