reactjs – 所有顶级屏幕标题(使用抽屉)标题中的react-navigatio
发布时间:2020-12-15 09:36:08 所属栏目:百科 来源:网络整理
导读:我可以为某些内容设置“通用”标题选项,例如将标题颜色设置为白色: // example screensconst SettingsScreen = () = ViewTextSettingsScreen.../Text/Viewconst List = () = ViewTextList.../Text/Viewconst Item = () = ViewTextItem.../Text/View// creat
我可以为某些内容设置“通用”标题选项,例如将标题颜色设置为白色:
// example screens const SettingsScreen = () => <View><Text>SettingsScreen...</Text></View> const List = () => <View><Text>List...</Text></View> const Item = () => <View><Text>Item...</Text></View> // create an object to pass on to relevant screens const navigationOptions = { header: { style: { backgroundColor: '#fff' } },} // MAIN SCREEN : a screen showing a list with ability to click on an list item and go to a detail page // ============================ const ListScreens = StackNavigator({ List: { screen: List,navigationOptions: navigationOptions },//show a hamburger menu Item: { screen: Item,// this is a detail page,so don not show a hamburger menu,rather show a back button }); const SettingsContainer = StackNavigator({ Settings: { screen: SettingsScreen },}); // LOGGED IN DRAWER VIEW : top-level component is a drawer with two menu items (main and settings) // ============================ const LoggedIn = DrawerNavigator({ Main: { screen: ListScreens },Settings: { screen: SettingsContainer },}); //... do stuff for root component 在DrawerNavigation菜单级别为所有路线添加汉堡菜单的最佳做法是什么?我想让这个流行音乐打开抽屉.没有访问props.navigation,除非我在每个组件内部……只是状态和参数.我是否需要复制每个文件中的代码? static navigationOptions = { title: ({ state }) => { if (state.params.mode === 'info') { return `${state.params.user}'s Contact Info`; } return `Chat with ${state.params.user}`; },header: ({ state,setParams }) => { // The navigation prop has functions like setParams,goBack,and navigate. let right = ( <Button title={`${state.params.user}'s info`} onPress={() => setParams({ mode: 'info' })} /> ); if (state.params.mode === 'info') { right = ( <Button title="Done" onPress={() => setParams({ mode: 'none' })} /> ); } return { right }; },.. DOCS HERE 相关问题(可能): https://github.com/react-community/react-navigation/issues/165 解决方法
我创建了自己的标题:
<View style={styles.navBarContainer}> <View style={styles.navBarRow}> <TouchableHighlight underlayColor={'#COLOR'} onPress={() => {this._drawer.openDrawer()}}> <Image source={require('../assets/images/menu-icon.png')} style={styles.menuIcon}/> </TouchableHighlight> <Text style={styles.navBarText}>{'TITLE'}</Text> <View/> </View> 如上所述,我正在使用openDrawer()事件,我在组件中引用了该事件: <Drawer ref={(drawer) => {this._drawer = drawer}} ... > 我不得不删除默认标头: export default class HomeScreen extends Component { static navigationOptions = { header: null }; ... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |