Визуализация глобального нижнего колонтитула в react-native-router-flux 3.x

У меня есть приложение, в котором на всех сценах я хочу отобразить нижний колонтитул глобальной навигации внизу экрана. Это было очень легко сделать в RNRF 2.x с опорой нижнего колонтитула, но у меня довольно много проблем с реализацией этого в 3.x, поскольку опоры нижнего колонтитула больше не существует. Кто-нибудь знает, как это сделать?


react-native react-native-router-flux
person Juuso    schedule 22.02.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать это только с React Native. Просто оберните старый основной компонент в новое представление, содержащее старый основной компонент и нижний колонтитул. Тогда нижний колонтитул будет отображаться всегда.

Предположим, что у вас есть основной компонент с именем MainComponent в файле 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>
);

Возможно, вам придется переместить некоторые стили из старого основного компонента в новое представление, которое его обертывает.

person ArneHugo    schedule 22.02.2017
comment
Хорошо, я столкнулся с этим в руководстве по миграции для RNRF, поэтому я не был уверен, что это рекомендуемый способ: Router is root container now and should not be nested. For nested scenes you should use Scene element. Но, возможно, это относится только к тому, чтобы не вкладывать его в сцену. Удалось решить проблему, используя поддержку navBar маршрутизатора, что заняло у меня некоторое время, чтобы понять, поскольку документы - это то, что они есть ... В любом случае спасибо! - person Juuso; 23.02.2017
comment
Хороший! Поскольку вы нашли другое и, возможно, лучшее решение для своей проблемы, не было бы ничего плохого в том, чтобы добавить его в качестве нового ответа и принять его :) - person ArneHugo; 23.02.2017