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

3 回答

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

  回复于 2024-04-27T19:37:27+08:00
• 0

  如果你正在使用redux（或其他类似的东西，只有一个地方来保持你的应用程序状态），你可以使这些对象引用状态树中的项目 . 例如，您可以在州内创建一个属性（ store.navigationState.currentScene ）并使 Toolbar.subtitle 指向该属性 .

  现在，每次导航到不同的场景时，都可以更新 currentScene ，工具栏的副 Headers 也会改变 .

  回复于 2024-04-27T19:37:27+08:00
• 0

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

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

  回复于 2024-04-27T19:37:27+08:00