在React Native中使用Animated.timing()API滑入/滑出内容

a1o7rhls 于 6个月前发布在 React

关注(0)|答案(1)|浏览(53)

我在我的React Native应用程序中有一个屏幕，可以使用Hooks基于一些切换按钮显示/隐藏内容。一切都很好，但我想改进UI并添加一些动画来滑入新内容并滑出旧内容。
这是我的代码

const [activeSwitch, setActiveSwitch] = useState(0);
...
return (
  <Scrollview>
    {activeSwitch === 1 ? (
      <View>
        <Text>SCREEN 1</Text>
      </View>
    ) : null}
    {activeSwitch === 2 ? (
      <View>
        <Text>SCREEN 2</Text>
      </View>
    ) : null}
    {activeSwitch === 3 ? (
      <View>
        <Text>SCREEN 3</Text>
      </View>
    ) : null}
  </Scrollview>
)}

字符串
我使用setActiveSwitch（）根据我单击的按钮设置状态。
我以前从未使用过Animation API，试图查看这里的文档，但无法使其工作。任何帮助都将不胜感激。

react-native

来源：https://stackoverflow.com/questions/62343548/using-animated-timing-api-in-react-native-to-slide-in-out-content

1条答案

按热度按时间

cmssoen21#

有点类似于我的own recent question，我需要命令一个有两个按钮的PageSlider。
无论如何，如果ScrollView用于垂直/水平滚动（因为组件非常长），这是可以的，但我宁愿在子对象本身中包含ScrollView，而不是用单个ScrollView Package 所有内容。如果它用于动画，请删除它，因为它没有用。
然后，记住activeSwitch将重新呈现整个页面，而你的JSX有点长。你可以重构你的代码，得到一个简单的帮助函数，让你的组件可见。

const getComponent() => {
  switch(activeSwitch) {
    case 1: return (<Screen1 />);
    case 2: return (<Screen1 />);
    ...
    default: return null;
  }
}

...

return <ScrollView>{getComponent()}</ScrollView>

字符串
然后，要在Reanimated 3中动画化您的视图，您可以利用诸如Entering和Exiting之类的 prop ，当屏幕的部分内容被有条件渲染时，这些 prop 将为您动画化布局：

<Screen1 entering={FadeIn} exiting={FadeOut} />

型
电话：https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

赞(0）回复(0）举报 6个月前

我来回答

在React Native中使用Animated.timing()API滑入/滑出内容

1条答案

相关问题

热门标签

最新问答