反应原生路由器通量和原生基础容器答案

【问题标题】：react native router flux & native base container反应原生路由器通量和原生基础容器
【发布时间】：2017-03-31 07:37:04
【问题描述】：

我是 react-native 的新手，所以我认为“HTML”而不是“native”可能有点过多，所以我的问题可能看起来很愚蠢。

我使用 react-native-router-flux 进行路由，并使用原生基础来处理一些不错的组件。我也想使用原生基础的页眉/内容/页脚，但我没有找到让它工作的方法。

为了拥有 Header/Content/Footer，这些组件必须包装在 Container 组件中。我没有找到使用 react-native-router-flux 的方法。

我的标题在导航栏周围，内容在每个场景组件内。

（对于标题，我做了一个扩展 rnrf 的自定义导航栏：

import { Header } from 'native-base';
import { NavBar } from 'react-native-router-flux';

var NavbarLulu = React.createClass({
    render: function() {
        return <Header>
            <NavBar {...this.props} {...this.state} />
        </Header>
    }
});

var Root = React.createClass({
    render: function() {
        return <Router>
           <Scene key="root" navBar={NavbarLulu}>
               <Scene.......>
           </Scene>
        </Router>
    }
});

请问有什么容器的解决方案吗？

【问题讨论】：

标签： react-native react-native-router-flux native-base

【解决方案1】：

我有一个想法，也许它可以解决你的问题，如果你只是使用原生基础 Header 作为你的自定义标题，并从 RNRF 隐藏导航栏，我有一个例子：

首先是定义路线

const App = () => {
return (
      <Router>
        <Scene key="root">
            <Scene key="nav" component={MyContainer} title="Navigation" initial={true} hideNavBar>
              <Scene key="main"  component={ExampleContent} title="MainPage" />
            </Scene>
        </Scene>
      </Router>
   );
}

在父场景中使用hideNavBar 隐藏RNRF Navbar。然后制作自己的标题

class MyHeader extends Component{
  render(){
    return(
      <Header>
            <Left/>
            <Body>
                <Title>Header</Title>
            </Body>
            <Right />
      </Header>
    )
  }
}

为子场景制作内容组件

class ExampleContent extends Component{
  render(){
    return (
      <Content>
        <Text>This is some content</Text>
      </Content>
    )
  }
}

之后，制作用于包装 Header 和 Content 的容器

class MyContainer extends Component{
  render(){
    const state = this.props.navigationState;
    const children = state.children;
    return(
      <Container>
        <MyHeader />
        <DefaultRenderer navigationState={children[children.length - 1]} onNavigate={this.props.onNavigate} />
      </Container>
    )
  }
}

Default Renderer 用于渲染子场景，所以你只需再次创建没有容器的内容

这是完整的源代码：

import React, { Component } from 'react';
import { Router, Scene, DefaultRenderer } from 'react-native-router-flux';
import { Container, Header, Content, Footer, Left, Right, Body, Title, Text } from "native-base";

class MyHeader extends Component{
  render(){
    return(
      <Header>
            <Left/>
            <Body>
                <Title>Header</Title>
            </Body>
            <Right />
      </Header>
    )
  }
}

class ExampleContent extends Component{
  render(){
    return (
      <Content>
        <Text>This is some content</Text>
      </Content>
    )
  }
}

class MyContainer extends Component{
  render(){
    const state = this.props.navigationState;
    const children = state.children;
    return(
      <Container>
        <MyHeader />
        <DefaultRenderer navigationState={children[children.length - 1]} onNavigate={this.props.onNavigate} />
      </Container>
    )
  }
}

const App = () => {
    return (
          <Router>
            <Scene key="root">
                <Scene key="nav" component={MyContainer} title="Navigation" initial={true} hideNavBar>
                  <Scene key="main"  component={ExampleContent} title="MainPage" />
                </Scene>
            </Scene>
          </Router>
    );
  }

export default App;

这是该示例代码的屏幕截图

我希望它可以成为您的一种解决方案，谢谢:)

【讨论】：