Question

我想知道一种将ToolbarAndroid与Navigator组件联系起来的方法。我的目的是始终在ToolbarAndroid子项中显示 route.title ，例如Text组件。这样，如果使用 BackAndroid 组件，我的标题始终是最新的！我不想使用Navigator.NavigationBar，因为我会错过ToolbarAndroid中内置的溢出菜单。

感谢任何帮助。

这是我的代码：

//... some code before

render() {
  return(
    <DrawerLayoutAndroid
      drawerWidth={300}
      ref={(drawerElement) => { this.DRAWER = drawerElement; }}
      drawerPosition={DrawerLayoutAndroid.positions.left}
      onDrawerOpen={this.setDrawerState}
      onDrawerClose={this.setDrawerState}
      renderNavigationView={() => <DrawerMenu navigate={this.navigateTo} />}
    >
      <Icon.ToolbarAndroid
        titleColor='#fff'
        navIconName='md-menu'
        onIconClicked={this.toggleDrawer}
        actions={toolbarActions}
        onActionSelected={this._onActionSelected}
        style={styles.appBar}
        overflowIconName="md-more"
      >
        <View>
          <TouchableOpacity
            onPress={this.navigateTo.bind(this, 0)}
            style={styles.appBarLogo}
          >
            <Icon name="md-boat" size={30} color="#fff" />
            <Text
              style={styles.appBarTitle}
              numberOfLines={1}
            >
              {this.state.title}
            </Text>
          </TouchableOpacity>
        </View>
      </Icon.ToolbarAndroid>
      <Navigator
        initialRoute={routes[0]}
        renderScene={(route, navigator) => {
          switch (route.index) {
            case 0:
              return <Home />
            case 1:
              return <Lindau />;
            case 2:
              return <About />;
            case 3:
              return <Credits />;
            default:
              return <Home />;
          }
        }}
        configureScene={(route, routeStack) =>
          Navigator.SceneConfigs.FloatFromRight
        }
        ref={(nav) => { this._navigator = nav; }}
      />
    </DrawerLayoutAndroid>
  );
}

Answer 1

所以，请帮助我，如果有人有更好的解决方案。经过多次尝试，我找到了一个可能的解决方案。

我为我的组件创建了一个名为'routes'的状态，然后，我已经用这个状态设置了我的工具栏标题。基本上，这个状态是我的路线堆栈。当我改变我的场景时，我在我的状态下推动这条路线，当我从BackAndroid组件返回时，我从状态弹出路线，一切正常。

此处修改了代码：

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      routes: [0], // Here the state to fix the problem...
      drawerClosed: true,
    }
    this.toggleDrawer = this.toggleDrawer.bind(this);
    this._onActionSelected = this._onActionSelected.bind(this);
    this.navigateTo = this.navigateTo.bind(this);
    this.setDrawerState = this.setDrawerState.bind(this);
    this.handlesBackButton = this.handlesBackButton.bind(this);
  }

  navigateTo(idx) {
    this.setState({
      routes: [ ...this.state.routes, idx]
    });
    this.DRAWER.closeDrawer();
    if (idx === 0) {
      this._navigator.resetTo(routes[0]);
      this.setState({
        routes: [0]
      });
    } else {
      this._navigator.push(routes[idx]);
    }
  }

  handlesBackButton() {
    if (this._navigator && this._navigator.getCurrentRoutes().length > 1) {
      try {
        this._navigator.jumpBack();
        const _routes = this.state.routes.slice();
        _routes.pop();
        this.setState({
          routes: _routes
        });
      } catch(e) {}
      return true;
    }
    return false;
  }

  render() {
    return(
      <DrawerLayoutAndroid
        drawerWidth={300}
        ref={(drawerElement) => { this.DRAWER = drawerElement; }}
        drawerPosition={DrawerLayoutAndroid.positions.left}
        onDrawerOpen={this.setDrawerState}
        onDrawerClose={this.setDrawerState}
        renderNavigationView={() => <DrawerMenu navigate={this.navigateTo} />}
      >
        <Icon.ToolbarAndroid
          titleColor='#fff'
          navIconName='md-menu'
          onIconClicked={this.toggleDrawer}
          actions={toolbarActions}
          onActionSelected={this._onActionSelected}
          style={styles.appBar}
          overflowIconName="md-more"
        >
          <View style={styles.appBarLogo}> // I have to fix this component view...
            <TouchableOpacity
              onPress={this.navigateTo.bind(this, 0)}
            >
              <Icon name="md-boat" size={30} color="#fff" />
            </TouchableOpacity>
            <Text
              style={styles.appBarTitle}
              numberOfLines={1}
            >
              {routes[this.state.routes[this.state.routes.length - 1]].title}
            </Text>
          </View>
        </Icon.ToolbarAndroid>
        <Navigator
          initialRoute={routes[0]}
          renderScene={(route, navigator) => {
            switch (route.index) {
              case 0:
                return <Home />;
              case 1:
                return <Lindau />;
              case 2:
                return <About />;
              case 3:
                return <Credits />;
              default:
                return <Home />;
            }
          }}
          configureScene={(route, routeStack) =>
            Navigator.SceneConfigs.FloatFromRight
          }
          ref={(nav) => { this._navigator = nav; }}
        />
      </DrawerLayoutAndroid>
    );
  }

}

如何关联本机ToolbarAndroid和Navigator

1 个答案: