React Native - 动画仅在Android上的Toggle Inspect之后工作

Question

我对 React/React-Native 环境很陌生，在 Android 上动画方面遇到了一些问题。

我正在使用反应动画来显示底部的错误和警告警报。问题是动画在iOS上工作正常，但只有在我启用“切换检查器”后才能在Android上运行，如果我不启用它，动画就不起作用，在调试器上，我能够看到组件在React组件结构上。

我已经尝试了解决方法，将Anifeed.Value设置为0.01并将Animale.createAnimatedComponent更改为Anidient.View。

动画应该在状态更改并且可见属性设置为TRUE之后发生，状态的更改是可以的，因为我可以看到它在React Native Debbuger上工作，并且slideIn / slideOut函数正在被useEffect钩子调用。

我使用的是 React 16.11.0 和 React-Native 0.62.2 版本

更新

我从组件中删除了位置：绝对值，现在我能够在屏幕顶部看到动画，我尝试将z索引的值更改为更高的值（我的应用程序中没有任何高于1的z索引），但它不起作用。

以下是代码的主要部分：

export const Alert = withTheme(({ theme: { primary, textGray } }) => {

  const translateValue = useRef(new Animated.Value(0)).current;

  const dispatch = useDispatch();

  const {

    visible,

    data: { type, message }

  } = useSelector(({ notification }) => notification);

  const slideIn = useCallback(() => {

    Animated.timing(translateValue, {

      toValue: 1,

      duration: 1000,

      useNativeDriver: true

    }).start();

  }, [translateValue]);

  const slideOut = useCallback(() => {

    Animated.timing(translateValue, {

      toValue: 0,

      duration: 1000,

      useNativeDriver: true

    }).start();

  }, [translateValue]);

  const handleClose = () => {

    dispatch(hideNotification());

  };

  useEffect(() => {

    if (visible) {

      slideIn();

    } else {

      slideOut();

    }

  }, [visible, slideIn, slideOut]);

  return (

    <Wrapper

      style={{

        transform: [

          {

            translateY: translateValue.interpolate({

              inputRange: [0, 1],

              outputRange: [300, 0]

            })

          }

        ]

      }}>

      <Content>

        <Icon name={icons[type]} size={20} color={primary} />

        <Message>{message}</Message>

      </Content>

      <Button

        onPress={handleClose}

        accessible

        accessibilityRole="button"

        accessibilityLabel="Fechar notificação">

        <Icon size={20} name="x" color={textGray} />

      </Button>

    </Wrapper>

  );

});

Answer 1

固定！Android上的z索引似乎存在一些问题。为了解决这个问题，我刚刚添加了海拔高度：当平台是Android时为1。请参阅下面的代码：&nbsp; &nbsp; <Wrapper&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isAndroid={Platform.OS === 'android'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; translateY: translateValue.interpolate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputRange: [0, 1],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; outputRange: [300, 0]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Content>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Icon name={icons[type]} size={20} color={primary} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Message>{message}</Message>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Content>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPress={handleClose}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accessible&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accessibilityRole="button"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accessibilityLabel="Fechar notificação">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Icon size={20} name="x" color={textGray} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; &nbsp; </Wrapper>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; const Wrapper = Animated.createAnimatedComponent(styled.SafeAreaView`&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; border-top-width: 1px;&nbsp; &nbsp; &nbsp; border-top-color: ${({ theme: { border } }) => border};&nbsp; &nbsp; &nbsp; background: ${({ theme: { background } }) => background};&nbsp; &nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; ${({ isAndroid }) => isAndroid && 'elevation: 1'}&nbsp; &nbsp; `);