我是 React Native 的新手。
我想为 android 和 ios 制作一个抽屉和工具栏。
我在我有导航器的主页上写了抽屉和工具栏的代码。
喜欢例如。
<Drawer>
<Toolbar />
<Navigator />
</Drawer>
所以我在所有内页都有抽屉和工具栏。但现在的问题是我如何控制抽屉和工具栏。
就像如果我想要一个不想显示抽屉功能的页面，并且我想根据应用程序内的页面显示/隐藏工具栏上的选项。
任何帮助将不胜感激。
实现上述目标的任何其他更好的方法。
谢谢
也许你应该看看react-native-router-flux。您可以在一个中心位置定义场景转换，还可以声明哪些场景将由 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>
}
}
如果您使用的是 redux（或其他类似的东西，可以在一个地方保存您的应用程序状态），您可以让这些对象引用您的状态树中的项目。例如，您可以在您的状态 ( store.navigationState.currentScene)内创建一个属性并对此表示您的Toolbar.subtitle观点。
现在，每次导航到不同的场景时，您都可以更新您的currentScene并且工具栏的副标题也会更改。
解决此类导航问题的最佳方法是使用react-router， 这样您就可以决定每个视图的路由配置。您可以创建要显示在某些子元素上但不显示在其他子元素上的元素。
您还可以知道您所在的路线并根据该路线更改组件上的元素。在这里你可以找到更多关于如何获得它的信息。