Question

我理解StackNavigator带有后退功能。

问题

我有一个TabNavigator，允许查看4个组件。每一个都很好。其中一个组件内部有一个按钮。此按钮可在屏幕上加载PDF。当此PDF加载到屏幕中时，用户无法退回到他们正在查看的初始组件。

问题

如何使用后退按钮功能等标题让用户在屏幕上呈现后退出PDF？

将StackNavigator用于加载PDF的一个按钮，这是我唯一的选择吗？

在这张图片中，你可以看到我能够制作一个带有后退按钮的标题组件。现在我无法想出一种退出PDF的方法。

我意识到我可以在每个组件上放置此标题，然后有条件地渲染按钮以切换PDF，但我希望有另一种方法可以在我使用时不必使用StackNavigator来进入堆栈TabNavigator。

PDF图片已呈现，

代码示例

有4个标签，Login是第一个加载的组件，其他三个标签通过BottomTabNav

导航到

About组件内部有一个Button，它有条件地呈现PDF。当您单击它时，它会加载PDF并使用三元组来显示基于切换this.state.pdf状态的关于或PDF 标签导航

const BottomTabNav = TabNavigator({
    Login: { screen: Login },
    Register: { screen: Register },
    Contact: { screen: Contact },
    About: { screen: About },
}, {

    tabBarComponent: NavigationComponent,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    tabBarOptions: {
        bottomNavigationOptions: {
            labelColor: 'white',
            rippleColor: 'white',
            tabs: {
                Login: {
                    barBackgroundColor: '#37474F',
                    icon: <Icon size={24} color="white" name="user-circle-o" />,
                },
                Register: {
                    barBackgroundColor: '#464949',
                    icon: <Icon size={24} color="white" name="address-book" />,
                },
                Contact: {
                    barBackgroundColor: '#5D4037',
                    icon: <Icon size={24} color="white" name="phone-square" />,
                },
                About: {
                    barBackgroundColor: '#3E2723',
                    icon: <Icon size={24} color="white" name="info-circle" />,
                },
            },
        },
    },
});

export default BottomTabNav;

＃

关于组件

class About extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pdf: false,
        };
    }

    render() {
        const getView = this.state.pdf ? (<WelcomeKit />)
            : (
                <ScrollView>
                    <Card
                        title="Creative Designs From Creative Minds"
                        image={robot}
                        style={styles.container}
                    >
                        <Text style={styles.textStyle} >
  Our professional team will design a responsive website or mobile app
  with your success in mind. We build mobile friendly sites that are
  search engine friendly.
                      </Text>
                        <Button
                            raised
                            icon={{ name: 'file-pdf-o', size: 32, type: 'font-awesome' }}
                            buttonStyle={styles.buttonStyle}
                            textStyle={{ textAlign: 'center' }}
                            title="Welcome Kit"
                            onPress={() => this.setState({ pdf: !this.state.pdf })}
                        />
                    </Card>
                </ScrollView>
            );
        return (
            getView
        );
    }
}

当有条件地渲染React Native时，退出组件

0 个答案: