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。

请参阅下面的代码：

    <Wrapper

          isAndroid={Platform.OS === 'android'}

          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>

      );

    const Wrapper = Animated.createAnimatedComponent(styled.SafeAreaView`

      width: 100%;

      border-top-width: 1px;

      border-top-color: ${({ theme: { border } }) => border};

      background: ${({ theme: { background } }) => background};

      z-index: 1;

      position: absolute;

      flex-direction: row;

      justify-content: space-between;

      align-items: center;

      bottom: 0;

      left: 0;

      ${({ isAndroid }) => isAndroid && 'elevation: 1'}

    `);