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

Question

我有几个渲染整个页面的视图，我想在它们之间切换。我可以为每个视图使用一个屏幕并在屏幕之间导航，但是每​​次都显示转换会有点糟糕的用户体验。将其视为页面顶部的一些选项卡，每个选项卡呈现不同的内容。

我一直在用像下面这样的条件来做。有没有其他方法可以更有效地做到这一点？

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 我在这里使用了类组件，可以很好地处理多个条件和呈现不同的视图，但在功能组件中也可以实现相同的效果。

class RM extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            selectedTab: ''
        }
    }

    setTab = (tab) => {
        this.setState({selectedTab: tab})
    }

    selectedTab = () => {
        switch(this.state.selectedTab){
            case 'A':
                return <ComponentA />
            case 'B':
                return <ComponentB />
            case 'C':
                return <ComponentC />
            default:
                return /* empty div maybe */
        }
    }

    render() {
        return(
            <div>
                <View>
                    <Button onClick={() => setTab('A')} />
                    <Button onClick={() => setTab('B')}  />
                    <Button onClick={() => setTab('C')}  />
                </View>
                {this.selectedTab()}
            </div>
        )
    }  
}