React Native标签页tabActive样式无法正常切换问题求助

标签页功能在Expo Web中运行正常，但在iPhone 13 mini的Expo Go及iOS模拟器中出现异常：点击新标签时，旧标签的tabActive样式无法移除；新标签点击时会应用激活样式，但之后所有标签的激活状态都无法清除。已尝试调整样式写法、用函数返回样式、清除Expo缓存，均无效。

复现代码 #

主组件（Jobs.js）

import React, { useState } from 'react';
import { View, Text, StyleSheet, Pressable, ScrollView, Dimensions } from 'react-native';
import Header from './Header';
import FAB from './FAB';
// Import Tabs styles
import { Tabs } from '../Styles';

export default function Jobs({ navigation }) {

  const [activeTab, setActiveTab] = useState("All Jobs");

  return (
    <>
      <Header screen="Jobs" />
      <View style={styles.container}>
        <View style={Tabs.container}>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            bounces={false} // iOS
            overScrollMode="never" // Android
          >
            {["All Jobs", "Your Posted Jobs", "Active Jobs"].map((tabTitle) => (
              <Pressable
              key={tabTitle}
              style={activeTab == tabTitle ? styles.tabActive : styles.tab}
              onPress={() => setActiveTab(tabTitle)}
            >
                <Text style={Tabs.tabTxt}>{tabTitle}</Text>
              </Pressable>
            ))}
          </ScrollView>
        </View>
      </View>
      <FAB navigation={navigation} />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  tabActive:{
    height: 50,
    backgroundColor: '#dfdfdf',
    paddingVertical: 10,
    paddingHorizontal: 20,
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 2
},
tab:{
    height: 50,
    backgroundColor: 'unset',
    paddingVertical: 10,
    paddingHorizontal: 20,
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 2
},
});

导入的样式文件（Styles.js）

import { Dimensions } from "react-native"

let screenWidth = Dimensions.get('window').width

//Tabs
export const Tabs = {
    container: {
        width: screenWidth * 0.9,
        height: 70,
        marginHorizontal: screenWidth* 0.05,
        borderWidth: 1,
        borderColor: '#f1f1f1',
        borderRadius: 8,
        flexDirection: 'row',
        alignItems:'center',
        overflow: 'scroll'
    },
    tabActive:{
        height: 50,
        backgroundColor: '#dfdfdf',
        paddingVertical: 10,
        paddingHorizontal: 20,
        margin: 10,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 2
    },
    tab:{
        height: 50,
        backgroundColor: 'unset',
        paddingVertical: 10,
        paddingHorizontal: 20,
        margin: 10,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 2
    },
    tabTxt:{
        fontFamily: 'Satoshi',
        fontSize: 16,
        color: '#071B26'
    }
}

修复方案 #

1. 替换unset背景色为明确值

iOS对backgroundColor: 'unset'的样式解析存在兼容性问题，将非激活标签的背景色改为和外层容器一致的#fff：

// 在styles.tab中修改
tab:{
    // ...其他样式
    backgroundColor: '#fff',
    // ...其他样式
},

2. 使用Pressable的样式回调函数

改用Pressable内置的样式回调，结合激活状态和按压状态，确保样式更新更可靠：

// 修改Pressable的style属性
<Pressable
  key={tabTitle}
  style={({ pressed }) => [
    activeTab === tabTitle ? styles.tabActive : styles.tab,
    pressed ? { opacity: 0.8 } : {} // 可选，添加按压反馈
  ]}
  onPress={() => setActiveTab(tabTitle)}
>
  <Text style={Tabs.tabTxt}>{tabTitle}</Text>
</Pressable>

3. 修复ScrollView外层容器的溢出设置

外层View的overflow: 'scroll'和ScrollView本身的滚动逻辑冲突，改为hidden：

// 在Tabs.container中修改
container: {
    // ...其他样式
    overflow: 'hidden',
    // ...其他样式
},

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