React Native-如何有效地在视图之间切换？

Question

我有几个可渲染整个页面的视图，我想在它们之间切换。我可以为每个视图使用一个屏幕，并在各个屏幕之间导航，但这对于每次显示过渡都非常糟糕的UX。就像页面顶部的一些标签一样看到它，每个标签都呈现不同的内容。

我一直在使用如下条件。还有另一种方法可以更有效地做到这一点吗？

import React, { useState, useEffect } from 'react';
import {StyleSheet, View, Image, Text, Dimensions, ImageBackground, Button} from 'react-native';

const RM = ( {route, navigation } : any) => {
    const [view, setView] = useState("A");
    return (
      <>
      <View>
        <Button onPress={() => setView("A")} title="Set A" />
        <Button onPress={() => setView("B")} title="Set B" />
        <Button onPress={() => setView("C")} title="Set C" />
      </View>
      <View>
        {view === "A" && (
          <ComponentA />
        )}
        {view === "B" && (
          <ComponentB />
        )}
        {view === "C" && (
          <ComponentC />
        )}
      </View>
      </>
    );
  };

export default RM;

Answer 1

switch case可以很好地处理多种条件并呈现不同的视图我在这里使用了类组件，但在功能组件中也可以实现。