React Native中TouchableOpacity渲染/点击/滚动时闪烁问题求助

问题详情 #

在React Native项目中，所有使用TouchableOpacity包裹Icon或Text的组件，渲染时都会出现异常闪烁。排查后确认底部按钮组件仅渲染一次，并非重复重渲染导致，但闪烁问题依然存在，且只要是TouchableOpacity包含Icon/Text的场景都会触发。

曾怀疑是绝对定位导致，但移除绝对定位后闪烁仍存在；无论是否使用FlatList（列表中包含该按钮组件），问题都持续存在。

已尝试的无效方案 #

• 移除FlatList
• 移除绝对定位
• 改用TouchableHighlight替代TouchableOpacity

代码示例 #

index.tsx #

import React, {useCallback} from 'react';
import {FlatList, View} from 'react-native';
import ActionButton from './Components/ActionButton';
import styles from './Styles';
import useWorkspacesHook from './Hooks/workspacesHook';

export default function index() {
  const {.... }=useWorkspacesHook();
  ....
  return (
    <View style={styles.mainContainer}>
      <FlatList
        data={workSpaces}
        renderItem={itemToRender}
        keyExtractor={keyExtractor}
        maxToRenderPerBatch={5}
      />
      <ActionButton
        editMode={enableEdit}
        enableEditMode={() => setEnableEdit(true)}
        enableSaveMode={() => setOpenAdd(true)}
        deleteEnabled={enableDelete}
        deleteWorkSpace={deleteSelected}
        closeEditDelete={closeEditSaveModal}
      />
    </View>
  );
}

index.tsx 样式（mainContainer） #

mainContainer: {flex: 1, padding: 16},

ActionButton.tsx #

import React from 'react';
import {Icon} from '@rneui/base';
import {TouchableOpacity, View} from 'react-native';
import styles from '../Styles';

export default function ActionButton({
  editMode,
  deleteEnabled,
  enableEditMode,
  enableSaveMode,
  closeEditDelete,
  deleteWorkSpace,
}: ActionButtonProps) {
  return (
    <View style={styles.buttonContainer}>
      {!editMode ? (
        <>
          <TouchableOpacity style={styles.iconButton} onPress={enableEditMode}>
            <Icon name="edit" color="white" size={20} />
          </TouchableOpacity>
          <TouchableOpacity style={styles.iconButton} onPress={enableSaveMode}>
            <Icon name="add" color="white" size={20} />
          </TouchableOpacity>
        </>
      ) : (
        <View>
          <TouchableOpacity style={styles.iconButton} onPress={closeEditDelete}>
            <Icon name="close" color="white" size={20} />
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              styles.iconButton,
              !deleteEnabled && styles.disableIconButton,
            ]}
            disabled={!deleteEnabled}
            onPress={deleteWorkSpace}>
            <Icon name="delete" color="white" size={20} />
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
}

ActionButton 组件样式 #

buttonContainer: {
    position: 'absolute',
    flexDirection: 'column',
    right: 20,
    bottom: 0,
  },
  iconButton: {
    width: 50,
    height: 50,
    backgroundColor: "blue",
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  disableIconButton: {
    backgroundColor: "some-light-grey",
  },

注：曾录制视频记录闪烁现象，但转成GIF后无法清晰呈现。该问题严重影响用户体验，希望有类似经验的开发者提供解决思路。

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