如何使用 react native 渲染所有组件中的内容？答案

【问题标题】：How to render contents in all components using react native?如何使用 react native 渲染所有组件中的内容？
【发布时间】：2017-06-06 10:51:18
【问题描述】：

我想在所有页面中添加页眉和页脚，如下所示。

示例：

那么如何在其他组件中渲染页眉和页脚呢？

就是写一次代码，然后如何在各个页面渲染？

【问题讨论】：

超级简单，阅读github.com/wix/react-native-navigation
这很酷@MedetTleukabiluly 但我无法添加我正在使用“react-native-router-flux”进行路由的新包。

标签： react-native react-native-android react-native-ios native-base

【解决方案1】：

如果我的问题正确，使用 react-native-router-flux 可以很容易地实现您的目标。查看文档https://github.com/aksonov/react-native-router-flux

【讨论】：

【解决方案2】：

我从来没有尝试过react-native-router-flux，但是当我看到文档时，也许你可以这样做：

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';

import PageOne from './PageOne';
import PageTwo from './PageTwo';

export default class App extends Component {
  render() {
    return (
      <View style={{ flex:1 }}>
        <YourHeaderComponent />
        <Router>
          <Scene key="root">
            <Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
            <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
          </Scene>
        </Router>
        <YourFooterComponent />
      </View>
    )
  }
}

你可以用 View 包装路由器，它的兄弟是你的页眉和页脚组件。

【讨论】：