时间戳

首页 > 解决方案 > 如何渲染几秒钟后消失的视图（反应原生）

javascript - 如何渲染几秒钟后消失的视图（反应原生）

问题描述

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

（当我触摸图像时，它会呈现此视图）我使用了可触摸的不透明度，但触摸时没有任何反应

<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>
  )
}

请帮忙

标签： javascriptreact-native

解决方案

你不能在 onPress 中返回一个组件，这不是它的工作原理，

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

const [ showPagination, setShowPagination] = useState(false)

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

<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])

推荐阅读