Question

我是React Native的新手我想为Android和ios制作一个抽屉和工具栏。
我在我的主页中编写了抽屉和工具栏的代码，我有导航器。

喜欢例如。

<Drawer>
  <Toolbar />
  <Navigator />
</Drawer>

所以我在所有内页都有抽屉和工具栏。但现在的问题是我如何控制抽屉和工具栏喜欢如果我想要一个页面，我不想显示抽屉功能，我想根据应用程序内的页面显示/隐藏工具栏上的选项。

非常感谢任何帮助。

任何其他更好的方法来实现上述目标。

由于

Answer 1

也许你应该看看react-native-router-flux。您可以在一个中心位置定义场景转换，并声明which scenes will be wrapped by a Drawer。

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

class App extends React.Component {
  render() {
    return <Router>
      <Scene key="root">
        <Scene key="login" component={Login} title="Login"/>
        <Scene key="register" component={Register} title="Register"/>
        <Scene key="drawer" component={Drawer} open={false} >
            <Scene key="home" component={Home}/>
                    ....
            </Scene>
            <Scene key="products" component={Products}/>
        </Scene>

      </Scene>
    </Router>
  }
}

对于工具栏操作，您可以在每个场景中放置一个工具栏组件。

class Home extends React.Component {
  render() {
    return (
      <View>
        <Toolbar/>       
      </View>
  }
}

class Products extends React.Component {
  render() {
    return (
      <View>
        <Toolbar/>       
      </View>
  }
}

Answer 2

If you're using redux (or something else alike that has a single place to keep your app state) you can make these objects references items inside your state tree. For instance, you could create a property inside your state (store.navigationState.currentScene) and make your Toolbar.subtitle points to that.

Now, everytime you navigate to a different scene, you could update your currentScene and the subtitle of your toolbar would also change.

Answer 3

执行此类导航问题的最佳方法是使用react-router 这样您就可以决定每个视图的路径配置。您可以创建要在某些子元素上显示但不在其他子元素上显示的元素。

您也可以知道您所在的路线，并根据该路线更改组件上的元素。 Here您可以找到有关如何获得该信息的更多信息。

React Native： - 如何通过控件在所有页面上使用公共抽屉和工具栏

3 个答案: