反应原生路由器通量和本机基础容器-Java 学习之路

我是新手反应原生，所以我想也许有点太多“HTML”而不是“原生”，所以我的问题可能看起来很愚蠢 .

我使用react-native-router-flux作为路由，并使用native作为一些不错的组件 . 我也想使用本机基础的Header / Content / Footer，但我找不到让它工作的方法 .

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

我的 Headers 位于导航栏周围，内容位于每个场景组件中 .

（对于 Headers 我做了一个扩展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>
    }
});

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

1 回答

我有一个想法，也许它可以解决你的问题，如果你只使用自定义标头的本机基本标头，并从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 . 然后制作自己的 Headers

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

之后，制作用于包装 Headers 和内容的容器

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;

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

enter image description here

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

回复于 2024-05-02T12:03:30+08:00

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

1 回答

相关问题