解決方法:將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>); } }}/>
React-native使用Navigator和ToolBar關聯
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.