react-navigation自定义抽屉不会重新渲染

Question

当我尝试选择其他抽屉项目时，样式styles.draweritemstxt_active和styles.draweritemstxt_inactive未设置/重新呈现。

Navigator.js

const MainDrawer = DrawerNavigator({
    Event: { screen: EventScreen },
    Wallet: { screen: WalletScreen},
    Profile: { screen: ProfileScreen},
    Contact: { screen: MemberContactScreen},
    Reward: { screen: MemberRewardScreen},
},{
  contentComponent: props => <DrawerScreen {...props} />
});

DrawserScreen.js

const DrawserScreen = props => {
    let totalitem = props.items;
    return(
      <ScrollView style={{backgroundColor:'#000'}}>
        <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
          {
            totalitem.map((ritem,i)=>{
                let txtstyle = null;
                if(props.activeItemKey == ritem.key){
                  txtstyle = styles.draweritemstxt_active;
                }else{
                  txtstyle = styles.draweritemstxt_inactive;
                }
                return(
                  <TouchableHighlight key={i} activeOpacity={0.9} onPress={()=> props.navigation.navigate(ritem.key)} style={styles.draweritems}>
                    <View>
                      <Text style={txtstyle}>{_convertRouteToTitle(ritem.routeName)}</Text>
                    </View>
                  </TouchableHighlight>
                );
            })
          }
        </SafeAreaView>
      </ScrollView>
    );
}

export default DrawserScreen;