Question

我可以设置标题选项＆＃34;普遍＆＃34;对于某些事情，例如将标题颜色设为白色：

// 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, navigationOptions: navigationOptions }, // 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

Answer 1

我已经创建了自己的标题：

  <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
  };
  ...

Answer 2

注意！ Email {id: function, clientId: function, email: function, iscc: function}是navigationOptions和Stack Navigation

之间的差异

但对于抽屉导航，您可以添加自己的标题并使用Drawer Navigation配置制作样式：
首先contentComponent然后

import { DrawerItems, DrawerNavigation } from 'react-navigation'之前的标头：

DrawerItems。

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView>后的页脚：

DrawerItems。

所有顶级屏幕标题（使用抽屉）的标题中的react-navigation汉堡包图标？

2 个答案: