react-native-deck-swiper状态变更后卡片内容不重新渲染问题

你遇到的问题是点击按钮更新count状态后，Text组件并未显示新值，核心原因是react-native-deck-swiper的renderCard函数作为props传递时，当count状态更新，Swiper组件未感知到renderCard的引用变化，因此不会触发卡片的重新渲染。

解决方案1：将卡片抽为独立组件 #

把卡片内容封装成单独的组件，通过props传递状态和更新函数，状态变化时子组件会自动重新渲染：

import React, { useState } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import Swiper from 'react-native-deck-swiper';

// 独立卡片组件
const Card = ({ count, setCount }) => {
  return (
    <View>
      <TouchableOpacity
        onPress={() => {
          setCount(2);
          console.log("Clicked");
        }}
        style={{ backgroundColor: 'yellow', width: 60 }}
      >
        <Text>Increase</Text>
      </TouchableOpacity>
      <Text>{count}</Text>
    </View>
  );
};

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <Swiper
      cards={['a', 'b', 'c']}
      renderCard={() => <Card count={count} setCount={setCount} />}
    />
  );
};

export default App;

解决方案2：使用useCallback包裹renderCard #

通过useCallback钩子缓存renderCard函数，并将count加入依赖数组，确保count变化时函数引用更新，触发Swiper重新渲染卡片：

import React, { useState, useCallback } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import Swiper from 'react-native-deck-swiper';

const App = () => {
  const [count, setCount] = useState(0);

  // 用useCallback包裹，依赖count
  const renderCard = useCallback(() => {
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            setCount(2);
            console.log("Clicked");
          }}
          style={{ backgroundColor: 'yellow', width: 60 }}
        >
          <Text>Increase</Text>
        </TouchableOpacity>
        <Text>{count}</Text>
      </View>
    );
  }, [count]); // 依赖count，状态变化时更新函数引用

  return (
    <Swiper
      cards={['a', 'b', 'c']}
      renderCard={renderCard}
    />
  );
};

export default App;

两种方案都能解决状态更新后卡片不渲染的问题，推荐第一种抽组件的方式，代码结构更清晰，也更符合React组件化的设计思想。

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