我已經使用 Modal 在本機反應中創建了自定義警報，但它只呈現一次。這是我的組件
import {Text, View, Modal, TouchableOpacity} from 'react-native';
import React, {useState} from 'react';
import {styles} from '../../Styles';
const CustomAlert = props => {
const {title, msg, visible} = props;
const [alert, setAlert] = useState(visible);
return (
<View>
<Modal
animationType="fade"
transparent={true}
visible={alert}>
<TouchableOpacity
style={styles.centeredView}
onPress={() => {
// setAlert(false);
}}>
<View style={styles.modalView}>
<Text>{title}</Text>
<Text>{msg}</Text>
<TouchableOpacity
onPress={() => setAlert(false)}>
<Text style={styles.btnText}>OK</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
</View>
);
};
這就是我在螢屏上渲染它的方式
const [alert, setAlert] = useState(false);
const submit = () => {
let reg = /^\w ([\.-]?\w )*@\w ([\.-]?\w )*(\.\w\w ) $/;
if (!name) {
setAlert(true);
return;
}}
并在螢屏上作為回報
{alert && <CustomAlert title="asdasd" msg="asd23" visible={alert} />}
在 m 螢屏中，當我單擊按鈕呈現此警報時，它只作業一次，我已經記錄了道具，它也顯示一次
編輯 @Thinker 的答案有效，但如何從操作中呈現這個 customAlert 組件？如果一個動作或 api 呼叫完成，如何渲染這個組件并在任何螢屏上顯示訊息作為 redux 中的操作不允許在那里渲染組件，因為它們不是反應功能組件......
uj5u.com熱心網友回復：
setAlert(true)不會觸發/更新該值alert，因為它已經true被觸發一次。（因為useState不會再次更新相同的變數值）
alert你可以通過直接觸發setAlertinonPress來改變你的目標CustomModal。像這樣的東西（我沒有運行它，但我的邏輯如下）：
這將是您的主要組件：
import { Text, View } from 'react-native';
import React, { useState } from 'react';
const MainComponent = () => {
const [alert, setAlert] = useState(false);
const submit = () => {
let reg = /^\w ([\.-]?\w )*@\w ([\.-]?\w )*(\.\w\w ) $/;
if (!name) {
setAlert(true);
return;
}
};
return (
<View>
{' '}
{alert && (
<CustomAlert
title="asdasd"
msg="asd23"
visible={alert}
onPress={(value) => setAlert(value)}
/>
)}{' '}
</View>
);
};這是CustomAlert：
import {Text, View, Modal, TouchableOpacity} from 'react-native';
import React, {useState} from 'react';
import {styles} from '../../Styles';
const CustomAlert = props => {
const {title, msg, visible, onPress} = props;
return (
<View>
<Modal
animationType="fade"
transparent={true}
visible={alert}>
<TouchableOpacity
style={styles.centeredView}
onPress={() => {
// setAlert(false);
}}>
<View style={styles.modalView}>
<Text>{title}</Text>
<Text>{msg}</Text>
<TouchableOpacity
onPress={() => onPress(false)}>
<Text style={styles.btnText}>OK</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
</View>
);
};轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469255.html