首页 > 解决方案 > 在外部渲染功能中反应原生渲染组件

问题描述

我创建了一个功能组件,我想在渲染函数之外调用它。

这是我的功能警报组件:

export  default function AlertBox(props,title,message,messageType)  
{
      return (

        <View style={ [styles.MainContainer, props ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']}>
          <Modal
            visible={props}
            transparent={true}
            animationType={"fade"}
            >
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
              <View style={styles.Alert_Main_View}>
  
                <Image
                  style={{
                    alignSelf: 'flex-end',
                    top: '-14%', right: '-3%',
                    position: 'absolute',
                    height: hp('10%'),
                   width: wp('10%'),
                  }}
                  resizeMode="contain"
                
                  source={require('../../../Images/Icon/cross.png')}
                />
                <View style={{width: '90%',}}>
                <Text style={[styles.Alert_Title,{ color: messageType=="error"? "red": '#000'}]}> {title} </Text>
                  <Text style={styles.Alert_Message}>{message} </Text>
       <View style={{  alignItems: 'center', justifyContent: 'center', backgroundColor: '#88aa31'  , borderRadius:5, padding:10}}>
                  <TouchableOpacity
                    activeOpacity={0.7}
                  >
                    <Text style={styles.TextStyle}> OK </Text>
                  </TouchableOpacity>
                </View>
                </View>
              </View>
            </View>
          </Modal>
        </View>
      );
}

我想在另一个组件上调用这个警报函数,如下所示:

Show_Custom_Alert(visible) {
       await AlertBox(true,"Alert","Are You Sure Deletee Item?","success")
      }

任何机构都可以告诉我如何呈现弹出窗口请帮助请帮助我

标签: react-native

解决方案


推荐阅读