React Native 如何实现点击图片后渲染几秒后自动消失的页码展示视图

问题根因 #

你现有写法的核心问题是 onPress 属于事件回调函数，函数的返回值不会被插入到 React 渲染树中，所以你返回的 <ShowPagination /> 根本不会被渲染，自然没有任何反应。React 组件的渲染内容只能放在组件的 return 语句里，通过状态驱动条件渲染才能控制组件的显隐。

解决步骤 #

1. 新增状态控制页码组件的显隐状态
2. 点击图片时修改显隐状态为 true，同时启动定时器，数秒后自动把显隐状态改回 false
3. 把页码组件放到渲染树中，通过条件渲染控制它是否展示
4. 调整页码组件支持接收当前页、总页参数，避免写死展示内容

完整代码示例 #

状态与自动消失逻辑 #

import { useState, useEffect, useRef } from 'react';

// 你的父组件内部
const [showPagination, setShowPagination] = useState(false);
// 用useRef存定时器避免闭包问题
const hideTimer = useRef(null);

useEffect(() => {
  if (showPagination) {
    // 3秒后自动隐藏，可自行调整时长
    hideTimer.current = setTimeout(() => {
      setShowPagination(false);
    }, 3000);
  }
  // 清除定时器避免内存泄漏
  return () => clearTimeout(hideTimer.current);
}, [showPagination]);

渲染部分修改 #

{/* 外层需要包一个容器承载两个子组件 */}
<View style={{flex: 1, position: 'relative'}}>
  <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 currentPage={当前页码变量} totalPage={总页码变量} />}
</View>

调整后的ShowPagination组件 #

const ShowPagination = ({currentPage, totalPage}) => {
  return(
    <View style={paging_style.paging_container}>
      <Text style={paging_style.text}>{currentPage}/{totalPage}</Text>
    </View>
  )
}

内容的提问来源于stack exchange，提问作者Yann