Render new scene without rerendering Панель инструментов [Навигатор и панель инструментов]

Question

У меня есть DrawerLayoutAndroid, который открывается ToolbarAndroid. Когда я создаю новую сцену (нажав кнопку в ящике). Я не хочу, чтобы панель инструментов отображалась снова, потому что она не выглядит слишком хорошо с анимацией.

Возможно ли это? И если это так?

Вот мой код:

/** 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> 
    ); 
    }