React-native使用Navigator和ToolBar關聯


解決方法:將ToolBar放在Navigator的內部並根據相關route來取出信息創建toolbar,而不是放在navigator的外面(Android原生系統是放在外面)
eg:
<Navigator initialRoute = {{
    id: '',
    index: 0,
    component: component,
    showToolBar: false,
    title: '',
}}
           configureScene = {(route)=> {
               return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
           }}
           renderScene = {(route, navigator)=> {
               //從route中取出相關信息來更新toolbar
               let Component = route.component;//導航器要顯示的界面
               myNavigator = navigator;
               let height = route.showToolBar ? 50 : 0;//該路由如果顯示toolbar就設置高度,否則就設置爲0,就不會顯示
               let title = route.title;//該路由要顯示的標題
               let onIconClicked = onBackIconClick;//默認的icon點擊事件(icon即爲toolbar中的最左方的icon)
               if (route.onBackIconClick) {
                   onIconClicked = route.onBackIconClick;//路由中重載的icon點擊事件
               }

               if (Component) {
                   return (
                       <View style = {{flex: 1}}>
                           
                           //根據route中的信息創建toolbar
                           <ToolbarAndroid
                               navIcon = {require('')}
                               title = {title}
                               titleColor = {'#fff'}
                               style = {{height: height, backgroundColor: '#63c2ee'}}
                               onIconClicked = {onIconClicked}
                           />
                           <Component navigator = {navigator}
                           />
                       </View>);

               }
           }}/>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章