Question

我正在使用React-Navigation，但我想您真的不需要事先了解它。

所以我有一个const Header = (props) => { return ( <View style={headerContainer}> <View> <Button onPress={() => props.navigation.navigate('Home')} title="Go Back"/> </View> <Text style={header}> Knicx <Text style={headerSecondary}> Crypto Ticker </Text> </Text> </View> ) }看起来像这样

 <Button onPress={() => props.navigation.navigate('Home')} 
          title="Go Back"/>

现在，在上面的通知中，我当前在所有页面上显示的按钮

<Header />

但是我不希望它出现在某些特定页面上，例如HomeScreen。

现在，一种解决方案是在我的主页中删除<Header />组件，复制上面的代码片段，将其粘贴到我的HomeScreen中，然后删除该组件（有点像硬编码），或者两个创建两个Header组件，一个有按钮，有一个没有按钮

[问题：] ，但是我在考虑是否可以动态切换按钮的可见性或将其堆叠在display: none的顶部？有人可以告诉我怎么做吗？（不，我们可以将按钮的不透明度设置为零，并在需要时进行更改）

[更新：] 我们可以使用redux来管理/传递状态，但问题是在 React-native 中，我们没有opacity并且我不想使用login_details

进行更改

Answer 1

发送showHomeButton: boolean作为标题的道具

const Header = props => (
    <View style={headerContainer}>
        {this.props.showHomeButton && (
            <View>
                <Button onPress={() => props.navigation.navigate('Home')} title="Go Back" />
            </View>
        )}
        <Text style={header}>
            {' '}
                Knicx
            <Text style={headerSecondary}> Crypto Ticker </Text>
        </Text>
    </View>
);

动态更改组件内部按钮的可见性

1 个答案: