0

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

4

1 に答える 1

0

シーンのルートはナビゲーターで、各シーンには 2 つの異なる引き出しがあり、それぞれが別のツールバーになっています。シーンの構造を次のように変更します。

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>
    );
  }
于 2016-06-04T13:55:37.127 に答える