在不重新渲染工具栏的情况下渲染新场景 [导航和工具栏]

Question

我有一个由 ToolbarAndroid 打开的 DrawerLayoutAndroid。当我渲染一个新场景时（通过按下抽屉中的按钮）。我不想再次渲染工具栏，因为它看起来不太适合动画。

这可能吗？如果是怎么回事？

这是我的代码：

/** Navigator class

import WelcomeView from './app/components/WelcomeView.js';
import SecondView from './app/components/SecondView.js';

class App extends Component {
  render() {
    return (
        <Navigator
          initialRoute={{name: 'Welcome'}}
          renderScene={this.renderScene}
        />
    );
  }
  
  renderScene(route, navigator) {
    if(route.name == 'Welcome') {
      return <WelcomeView navigator={navigator} {...route.passProps} />
    }
    if(route.name == 'Second') {
      return <SecondView navigator={navigator} {...route.passProps} />
    }
  }
}

/** DrawerLayout

export default class Drawer extends Component {
    
    navigate(dest) {
        this.props.navigator.push({name: '{dest}'});
    }
    
    render() {
        var navigationView = (
            <View style={{backgroundColor: '#fff', flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <TouchableHighlight onPress={this.navigate('Welcome')}>
                        <DrawerItem text="Home" icon="home"/>
                </TouchableHighlight>
                <TouchableHighlight onPress={this.navigate('Second')}>
                    <DrawerItem text="Second" icon="backup" />
                </TouchableHighlight>
            </View>
        );
        return (
    <DrawerLayoutAndroid
      ref='DRAWER'
      drawerWidth={300}
      drawerPosition={DrawerLayoutAndroid.positions.Left}
      renderNavigationView={() => navigationView}>
      <ToolbarAndroid
        title="App"
        navIcon={require('../images/Recorder.png')}
        style={{height: 56}}
        onIconClicked={() => this.refs['DRAWER'].openDrawer()}
    />
      {this.props.pageContent}
    </DrawerLayoutAndroid>
        )
    }
}

/** Welcome View

export default class WelcomeView extends Component {
    render() {
        return (
            <Drawer
            navigator={this.props.navigator}
            pageContent={
                <View>
                    <View style={{flex: 1, alignItems: 'center'}}>
                        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
                        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
                    </View>
                </View>}
            />
        )
    }
}

/** Second View

export default class WelcomeView extends Component {
    render() {
        return (
            <Drawer
            navigator={this.props.navigator}
            pageContent={
                <View>
                    <View style={{flex: 1, alignItems: 'center'}}>
                        <Text>Second screen!</Text>
                    </View>
                </View>}
            />
        )
    }
}

Answer 1

场景的根是一个导航器，每个场景都有两个不同的抽屉，作为单独的工具栏。您可能希望将场景结构更改为类似这样的内容。

class App extends Component {
  render() {
    return (
      <DrawerLayoutAndroid
       ref='DRAWER'
       drawerWidth={300}
       drawerPosition={DrawerLayoutAndroid.positions.Left}
       renderNavigationView={() => navigationView}>
       <Toolbar/>
       <Navigator
        initialRoute={{name: 'Welcome'}}
        renderScene={this.renderScene}/>
     </DrawerLayout>
    );
  }

在不重新渲染工具栏的情况下渲染新场景 [导航和工具栏]

Render new scene without rerendering Toolbar [Navigator and Toolbar]

react-native

react-native-android