反应原生路由器通量和本地基地容器

我是新的反应原生，所以我想也许有点太多“HTML”而不是“本地”，所以我的问题可能看起来很愚蠢。反应原生路由器通量和本地基地容器

我使用react-native-router-flux进行路由选择，并使用native-base为一些很好的组件。我想使用本地基地的页眉/内容/页脚，但我没有找到一种方法来使它工作。

为了有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> 
    } 
});

的容器中的任何解决方案，请

来源

2016-11-16 Peekmo

我有一个想法，也许它可以解决你的问题，怎么样如果你只是使用本地基头为您的自定义标题，并隐藏导航栏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导航栏。然后你自己做头

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> 
    ) 
    } 
}

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;

这是该示例代码

我希望它可以为你一个解决方案的截图，谢谢:)

来源

2017-07-18 10:56:33

反应原生路由器通量和本地基地容器

回答

相关问题