解决方法:将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关联
最新推荐文章于 2023-09-24 02:50:01 发布