如何在 React Native 中禁用图像淡入效果？答案

【问题标题】：How to disable image fade in effect in React Native?如何在 React Native 中禁用图像淡入效果？
【发布时间】：2017-03-18 03:14:32
【问题描述】：

情况

动态切换图像
反应原生
开发模式
安卓

问题

图像在开发模式下出现时淡入淡出。这是一个问题，因为我正在开发和调整具有实际淡入效果的图像动画。是否可以禁用淡入效果？

尝试

切换到释放模式。工作，但在开发过程中不合适。
最小化图像文件大小。没有明显差异。
最小化图像显示尺寸。没有明显的区别。

【问题讨论】：

你能发布一些你正在使用的代码
你在页面的任何地方都使用了 Animated.spring() 吗？我有一个问题，在可视化树的一个组件中使用它意味着页面上的每个元素都会获得淡入动画。在我弄清楚它的来源之前让我有点疯狂。
你有想过这个吗？
不，我在发布模式下设计了部分动画的淡入淡出一段时间，虽然不是很方便，但它确实有效。

标签： reactjs react-native react-native-android

【解决方案1】：

只需将fadeDuration={0} 设置为Image 组件，这没有记录

您可以查看here了解更多信息

【讨论】：

我使用react-native-fast-image 只是为了摆脱这种渐入效应！现在我知道淡入淡出效果是有意为之的，我可以使用fadeDuration={0} 来摆脱它！ +1
只是指出现在是documented。

【解决方案2】：

在将图像添加到自定义ViewGroup 之前，我设法通过使用自定义ViewGroupManager 包装我的<Image /> 并使用反射将ReactImageView.mFadeDuration 设置为零来防止淡入淡出动画。 编辑： ~~但这会在显示图像时增加明显的延迟：(~~实际上没有延迟。

类似这样的：

public class NoFadeImageWrapper extends ViewGroup {
    public NoFadeImageWrapper(Context context) {
        super(context);
    }

    @Override
    public void onViewAdded(View child) {
        if (child instanceof ReactImageView) {
            ((ReactImageView) child).setFadeDuration(0);
            ReflectionUtils.setField(child, "mIsDirty", true);
        }
        super.onViewAdded(child);
    }
}

ReflectionUtils.setField 实现：

public class ReflectionUtils {
    public static void setField(Object obj, String name, Object value) {
        try {
            Field field = getField(obj.getClass(), name);
            if (field == null) {
                return;
            }
            field.setAccessible(true);
            field.set(obj, value);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

【讨论】：