React Native条件控制组件样式报错，求正确实现方案

你遇到的是JSX语法错误：React的JSX属性中只能使用表达式（可直接求值的代码片段），而if...else是控制流语句，不能直接写在属性的{}里，这就是报错的核心原因。

正确实现方式 #

方式1：使用三元运算符（最简洁）

直接把条件判断写成三元表达式（属于表达式，符合JSX要求）：

<PlatformPressable
    key={route.name}
    style={route.name === 'index' ? styles.tabbarIndex : styles.tabbarItems}
    href={buildHref(route.name, route.params)}
    accessibilityState={isFocused ? { selected: true } : {}}
    accessibilityLabel={options.tabBarAccessibilityLabel}
    testID={options.tabBarButtonTestID}
    onPress={onPress}
    onLongPress={onLongPress}
>
    {icons[route.name]({
        color: isFocused ? colors.primary : colors.text,
        size: 35
    })}
</PlatformPressable>

方式2：提前定义样式变量（适合复杂逻辑）

如果后续还要扩展条件判断，先在组件内部定义好样式变量，再传入属性，可读性更强：

// 在组件渲染逻辑前定义
const buttonStyle = route.name === 'index' 
    ? styles.tabbarIndex 
    : styles.tabbarItems;

// 渲染组件时使用
<PlatformPressable
    key={route.name}
    style={buttonStyle}
    // 其他属性...
>
    {/* 子元素 */}
</PlatformPressable>

方式3：合并多组样式（例如叠加聚焦状态）

如果需要同时应用基础样式+条件样式（比如聚焦时的额外样式），可以用数组传递样式（React Native会自动合并，后面的样式会覆盖前面的重复属性）：

<PlatformPressable
    key={route.name}
    style={[
        // 基础条件样式
        route.name === 'index' ? styles.tabbarIndex : styles.tabbarItems,
        // 聚焦时的额外样式（可选）
        isFocused && styles.tabbarFocused
    ]}
    // 其他属性...
>
    {/* 子元素 */}
</PlatformPressable>

补充说明 #

如果tabbarIndex是在tabbarItems基础上做的样式修改，也可以写成数组形式让样式叠加：

style={[styles.tabbarItems, route.name === 'index' && styles.tabbarIndex]}

这样tabbarIndex里的属性会覆盖tabbarItems中的同名属性，无需完全重写样式。

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