React-native使用Navigator和ToolBar关联

时间:2021-05-30 18:59:38

解决方法:将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>);

}
}}/>