カスタム引き出しにactiveTintColorを設定する

Question

私はDrawerNavigatorを使用して引き出しを作成しています。私は

contentOptions: { 
     activeTintColor: '#65433d', 
    } 

は、今私はcontentComponentを設定することで、私の引き出しをカスタマイズすることを決めactiveTintColor値を設定することにより、引き出しの現在選択された画面を強調しました。だから、

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import PropTypes from 'prop-types'; 
import React, {Component} from 'react'; 
import styles from './SideMenu.style'; 
import {NavigationActions} from 'react-navigation'; 
import {ScrollView, Text, View} from 'react-native'; 

class SideMenu extends Component { 
    navigateToScreen = (route) =>() => { 
    const navigateAction = NavigationActions.navigate({ 
     routeName: route 
    }); 
    this.props.navigation.dispatch(navigateAction); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <ScrollView> 
      <View> 
      <Text style={styles.sectionHeadingStyle}> 
       Section 1 
      </Text> 
      <View style={styles.navSectionStyle}> 
       <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page1')}> 
       Page1 
       </Text> 
      </View> 
      </View> 
      <View> 
      <Text style={styles.sectionHeadingStyle}> 
       Section 2 
      </Text> 
      <View style={styles.navSectionStyle}> 
       <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page2')}> 
       Page2 
       </Text> 
       <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page3')}> 
       Page3 
       </Text> 
      </View> 
      </View> 
     </ScrollView> 
     <View style={styles.footerContainer}> 
      <Text>This is my fixed footer</Text> 
     </View> 
     </View> 
    ); 
    } 
} 

SideMenu.propTypes = { 
    navigation: PropTypes.object 
}; 

export default SideMenu; 

SlideMenu.js

で

export default DrawerNavigator({ 
    Page1: { 
    screen: Page1 
    }, 
    Page2: { 
    screen: Page2 
    }, 
    Page3: { 
    screen: Page3 
    } 
}, { 
    contentComponent: SideMenu, 
    drawerWidth: 300 
}); 

のように私のコードはどのように選択したメニュー項目の異なる色を設定することができます見えますか？

Answer 1

現在の画面を識別する2つの方法があります。 navigation支柱はrouteNameを含むサブプロップを持っています。それに応じてSideMenuコンポーネントを確認してレンダリングすることができます。

ファーズオプションは

export default DrawerNavigator({ 
    Page1: { screen: Page1 }, 
    Page2: { screen: Page2 }, 
    Page3: { screen: Page3 } 
}, { 
    contentComponent: (props) => (
     <SideMenu currentScreen={props.navigation.state.routeName} {...props} /> 
), 
    drawerWidth: 300 
}); 

第二の方法は、直接コンポーネント内それを読むことであるDrawerNavigator

例を通してそれを送信することです。

例

class SideMenu extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { currentScreen: props.navigation.state.routeName }; 
    } 

    render() { 
    return(
     <SomeView 
     style={[styles.view, (this.state.currentScreen === 'Page1' ? styles.active : {})]} 
     /> 
    ) 
    } 
}