我建立了一个底部导航栏,中间有一个按钮。我希望此按钮转到具有全高页面的路由,其中没有标题且没有底部栏,并且我从头开始构建此页面。
问题在于props
和navigation
没有以某种方式传递,因此我什至在实际使用它们之前都无法控制台记录它们。
我将导航文件本身导入了我的Home文件中,
<ImageBackground
style={{ width: "100%", height: "100%" }}
source={require("./../../assets/images/background.png")}
>
<View style={styles.homeStyle}>
<View style={styles.headerStyle}>
<Header />
</View>
<HomeBottomNav />
</View>
</ImageBackground>
这是底部导航栏本身
bottomBarConfig = {
Summary: {
screen: Summary,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={
focused
? require("./../assets/images/home_active.png")
: require("./../assets/images/home_notactive.png")
}
size={25}
/>
);
},
title: "Home"
}
},
Trips: {
screen: TripsNavigation,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={
focused
? require("./../assets/images/mytrips_active.png")
: require("./../assets/images/mytrips_notactive.png")
}
size={25}
/>
);
},
title: "My Trips"
}
},
Booking: {
screen: BookingNavigation,
navigationOptions: {
tabBarIcon: ({tintColor}) => {
return (
<TouchableOpacity
onPress={ () => console.log('How can I navigate to outside route from here') }
style={{
height: 90,
width: 90,
borderRadius: 100,
backgroundColor: '#B31F3A',
paddingTop: 10,
marginBottom: 10
}}>
<Image
source={ require('./../assets/images/book.png') }
size={15}
/>
</TouchableOpacity>
)},
},
},
Wallet: {
screen: Wallet,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={
focused
? require("./../assets/images/mywallet_active.png")
: require("./../assets/images/mywallet_notactive.png")
}
size={25}
/>
);
},
title: "My credit"
}
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={
focused
? require("./../assets/images/more_active.png")
: require("./../assets/images/more_notactive.png")
}
size={25}
/>
);
}
}
}
};
const TabNavigator = createBottomTabNavigator(bottomBarConfig, {
});
const App = createAppContainer(TabNavigator);
export default App;