[英]How can I edit navigationOptions for each screen in nested tabNavigation?
I am trying to show title in the header and also a right action button in the header.我试图在 header 中显示标题,还在 header 中显示右操作按钮。
I have tried to follow https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-tab-navigator-contains-a-stack-and-you-want-to-hide-the-tab-bar-on-specific-screens But without any progress.我试图关注https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-tab-navigator-contains-a-stack-and-you-want-to-hide-the-tab -bar-on-specific-screens但没有任何进展。
Navigation.js导航.js
const FeedStack = createStackNavigator({
Welcome: {
screen: WelcomeScreen,
navigationOptions: {
headerTitle: 'Welcome',
},
},
Auth: {
screen: AuthScreen,
navigationOptions: {
headerTitle: 'Login',
},
},
}, {
defaultNavigationOptions: {
headerStyle: {
backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
},
headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
},
});
const TabNavigator = createBottomTabNavigator({
DailyTask: {
screen: DailyTaskScreen,
navigationOptions: {
headerTitle: 'Daily Task',
},
},
MyTasks: {
screen: MyTasksScreen,
navigationOptions: {
headerTitle: 'My Tasks',
},
},
SelectCategory: {
screen: SelectCategoryScreen,
navigationOptions: {
headerTitle: 'Select Category',
},
},
}, {
defaultNavigationOptions: {
headerStyle: {
backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
},
headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
},
});
const HomeStack = createStackNavigator({
Tabs: TabNavigator,
}, {
defaultNavigationOptions: {
headerStyle: {
backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
},
headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
},
});
const AppNavigator = createSwitchNavigator({
Auth: FeedStack,
Home: HomeStack,
}, {
defaultNavigationOptions: {
headerStyle: {
backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
},
headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
},
});
export default createAppContainer(AppNavigator);
Screen.js Screen.js
DailyTaskScreen.navigationOptions = {
headerTitle: 'Daily Task',
headerRight: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title='Category'
iconName='md-albums'
onPress={() => {
this.props.navigation.navigate('SelectCategory')
}}
/>
</HeaderButtons>
)
};
What do I need to do to get the expected results of being able to edit the navigationOptions?我需要做什么才能获得能够编辑 navigationOptions 的预期结果?
For adding an element at right of the header and implementing it's onPress, you can do it like this:要在 header 的右侧添加一个元素并在 onPress 上实现它,您可以这样做:
Just add this code below 'export default class' in the js file of the screen where you want to add it.只需在要添加它的屏幕的 js 文件中的“导出默认类”下方添加此代码。
static navigationOptions = {
headerLeft: null,
headerRight: (
<TouchableOpacity
onPress={() => alert('This is a button!')}>
<Text style={{color: '#fff', marginRight:12, fontSize: 14}}>Done</Text>
</TouchableOpacity>
)
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.