0
Ich habe eine DrawerLayoutAndroid, die von ToolbarAndroid geöffnet wird. Wenn ich eine neue Szene rendere (durch Drücken einer Taste in der Schublade). Ich möchte nicht, dass die Toolbar erneut gerendert wird, weil sie mit der Animation nicht gut aussieht.Render neue Szene ohne neu zu rendern Toolbar [Navigator und Toolbar]
Ist das möglich? Und wenn es so ist?
Hier ist mein Code:
/** 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>}
/>
)
}
}
Können Sie etwas Code teilen? Was passiert, wenn die Toolbar erneut gerendert wird? Animiert es mit der Szene? –
Ja, es animiert mit der Szene. Ich werde etwas Code bereitstellen. – Dedpul