在 React Native 中根据某些条件启用道具？

Question

如果menuIndex == menus.house。

，我想为原生基本按钮应用边框道具

<Button bordered>
    <Text uppercase={false}>House</Text>
</Button>

这是我试过的，

<Button {menuIndex == menus.house? '' : bordered}>
    <Text uppercase={false} style={styles.menuTextButtonActive}>
        House 
    </Text>
</Button>

Answer 1

<Button bordered>
    ...
</Button>

可以这样理解

<Button bordered={true}>
  ...
</Button>

因此，您可以执行如下布尔表达式

<Button bordered={menuIndex == menus.house}>
    <Text uppercase={false} style={styles.menuTextButtonActive}>
        House 
    </Text>
</Button>

Answer 2

或者，您可以将该值存储为渲染函数中的常量：

class FooBar extends React.Component {
    [...]
    render() {
        const indexIsHouse = menuIndex == menus.house;
        return (
            <Button bordered={indexIsHouse}>
                <Text uppercase={false} style={styles.menuTextButtonActive}>
                    House 
                </Text>
            </Button> 
        )
    }
}

这样做可以让您重复使用该条件。 indexIsHouse 计算结果为布尔值。

在 React Native 中根据某些条件启用道具？

Enabling a prop based on some condition in react native?

reactjs

react-native

native-base