如何渲染几秒钟后消失的视图(本地反应)

Question

想要呈现一个显示当前页面/页数的视图

(当我触摸图像时，它会渲染这个视图)我使用了可触摸的不透明度，但当触摸时，什么都不会发生

<TouchableOpacity
onPress={()=>{return <ShowPagination/>}}
style={{width: '100%', height: '100%', bottom:40}}
onStartShouldSetResponder={(e) => {
return e.nativeEvent.touches.length < 2 && scaleValue.current <= 1;
}}
>
<Image
source={source}
resizeMode="contain"
style={styles.image}
/>
</TouchableOpacity>

这是我想渲染的视图

const ShowPagination = () => {
return(
<View style={paging_style.paging_container}>
<Text style={paging_style.text}>NP/TP</Text>
</View>
)
}

请帮助

Answer 1

你不能在onPress中返回组件，这不是它的工作方式，

为了实现这一点，你应该让州政府参与进来，

const [ showPagination, setShowPagination] = useState(false)

然后在可触摸的不透明度中，将ShowPagination设置为真正的

<TouchableOpacity
onPress={()=> setShowPagination(true) }
style={{width: '100%', height: '100%', bottom:40}}
onStartShouldSetResponder={(e) => {
return e.nativeEvent.touches.length < 2 && scaleValue.current <= 1;
}}
>
<Image
source={source}
resizeMode="contain"
style={styles.image}
/>
</TouchableOpacity>

然后根据要求在组件内部的某个地方，将ShowPagination放置在下方

{ showPagination && <ShowPagination /> }

最后一件事，你想在几秒钟后隐藏，你可以在useEffect 中设置setTimeout

useEffect(() => {
if (showPagination) {
// 1000 for 1 second
setTimeout(() => setShowPagination(false), 1000)
}
}, [showPagination])

Answer 2

看看这个，也许可以理清思路。

const [ showPagination, setShowPagination] = useState(false)

<>
<TouchableOpacity
onPress={() setShowPagination(prev => !prev)}}
// ...rest of props
> 
// .... rest of component
</TouchableOpacity>

// When render will trigger the useEffect of ShowPagination Component
{ showPagination && <ShowPagination delay={1000} /> } 
</>
....

ShowPagination.tsx

import { Animated, Easing } from 'react-native';
import React, { useRef, useCallback, useEffect } from 'react';
export const ShowPagination = (props) => {
const showPaginationRef = useRef(new Animated.Value(1)).current;
const animate = useCallback(
(toValue = 0) => {
Animated.timing(showPaginationRef, {
toValue,
duration: 200,
isInteraction: false,
useNativeDriver: false,
easing: Easing.linear,
}).start();
},
[showPaginationRef],
);
useEffect(() => {
setTimeout(() => animate(), props.delay);
}, [animate]);
const opacity = showPaginationRef.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
return (
<Animated.View style={[paging_style.paging_container, { opacity }]}>
<Text style={paging_style.text}>NP/TP</Text>
</Animated.View>
);
};