在 react-native-router-flux 3.x 中渲染全局页脚

问题描述

我有一个应用程序，我想在所有场景中在屏幕底部呈现全局导航页脚.这是在RNRF 2.x 中使用footer prop 很容易做的事情，但是我在3.x 中实现它时遇到了很多麻烦，因为footer prop 不再存在.有人知道怎么做吗?

I have an app where on all scenes I want to render a global navigation footer at the bottom of the screen. This was a very easy thing to do in RNRF 2.x with the footer prop, but I'm having quite a lot of trouble implementing it in 3.x since the footer prop does not exist anymore. Anyone know how to go about doing this?

推荐答案

您只能使用 React Native 来做到这一点.只需将旧的主要组件包装在一个包含旧的主要组件和页脚的新视图中.然后页脚将始终显示.

You can do this with only React Native. Just wrap your old main component in a new View that contains the old main component and the footer. Then the footer will always be shown.

假设您在文件 path/to/main/component.js 中有一个名为 MainComponent 的主要组件:

Assuming you have a main component named MainComponent in a file path/to/main/component.js:

// path/to/main/component.js
export default class MainComponent extends React.Component {
    ...
}

只需将其更改为:

// path/to/main/component.js
class MainComponent extends React.Component {
    ...
}

export default () => (
    <View styles={styles.newMainComponent}>
        <MainComponent />
        <GlobalFooter />
    </View>
);

您可能需要将一些样式从旧的主组件移动到包装它的新视图中.

You may need to move some styles from your old main component to the new view that wraps it.

这篇关于在 react-native-router-flux 3.x 中渲染全局页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！