React Native函数组件点击按钮切换显示隐藏组件的实现方法

你现有的代码已经实现了按钮选中态的切换逻辑，只需要增加条件渲染的逻辑即可实现视图切换效果，具体修改如下：

实现步骤 #

• 你已经定义了selected状态存储当前激活的按钮ID，直接复用该状态即可，不需要额外新增状态变量
• 编写两个对应展示的视图组件，分别对应「待处理工单」和「已解决工单」的页面内容
• 在按钮渲染区域的下方，根据selected的取值渲染匹配的视图

修改后的完整代码 #

import { useState, SafeAreaView, View, Text } from 'react-native';
// 此处替换为你自己的CustomButton、Constants等依赖导入

const SupportScreen = ({ props, navigation }) => {
  const lists = [
    {id: 1, title: 'Pending Tickets'},
    {id: 2, title: 'Resolved Tickets'},
  ];
  const [selected, setSelected] = useState(1);

  const handleColor = row => {
    setSelected(row.id);
  };

  return (
    <SafeAreaView>
      <View style={{flexDirection: 'row', marginTop: 10}}>
        {lists.map(list => (
          <CustomButton
            key={list.id}
            customclick={() => {
              handleColor(list);
            }}
            title={list.title}
            style={{
              backgroundColor:
                list.id === selected
                  ? Constants.Colors.PRIMARY
                  : Constants.Colors.WALLTE_TXT_GRAY_COLOR,
              width: 180,
              elevation: 3,
            }}
            tColor={Constants.Colors.WHITE}
            tfz={12}
          />
        ))}
      </View>

      {/* 新增条件渲染区域，替换为你自己的业务视图代码 */}
      <View style={{flex:1, marginTop: 15}}>
        {selected === 1 ? (
          <View>
            <Text>待处理工单列表内容</Text>
          </View>
        ) : (
          <View>
            <Text>已解决工单列表内容</Text>
          </View>
        )}
      </View>
    </SafeAreaView>
  );
};

补充说明 #

如果两个视图的业务逻辑比较复杂，建议单独抽离成独立的函数组件，比如PendingTickets和ResolvedTickets，直接在条件渲染处引入使用即可，视图切换时会自动卸载隐藏的组件，不需要额外手动处理销毁逻辑。

内容的提问来源于stack exchange，提问作者Azhar