在所有顶级屏幕标题（使用抽屉）标题中的反应导航汉堡包图标？

我可以设置标题选项“通用”的一些东西，比如做头白色：在所有顶级屏幕标题（使用抽屉）标题中的反应导航汉堡包图标？

// 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

来源

2017-02-19 arcom

通知！ 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后：

contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView>。

来源

2017-07-17 10:24:45

我已经创建了自己的头：

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

来源

2017-07-17 11:38:59 Pic

在所有顶级屏幕标题（使用抽屉）标题中的反应导航汉堡包图标？

回答

相关问题